複利相對字體大小：領養孩子的字體大小乾淨的方式，而不是父元素

舉例來說，如果我有：複利相對字體大小：領養孩子的字體大小乾淨的方式，而不是父元素

td { font-size: 1.3em } 

h2 { font-size: 2em } 
h3 { font-size: 1.6em } 
p { font-size: 1.2 }

，我有我的表 - 內標題/段落細胞，我知道我能避免由以下配混字體大小：

td h2, td h3, td p { font-size: 1em }

，這將導致在標題/在具有1.3em（該TD的）的字體大小我的表細胞段落。

但我在尋找的是一個很好的，乾淨的方式，每個子元素都有它的原始字體大小，而不是父級。

我真的想避免做以下的（當然我想避免使用PX）：

td h2 { font-size: 1.54em } // 1.3 x 1.54 ~ 2 
td h3 { font-size: 1.23em } // 1.3 x 1.23 ~ 1.6 
td p { font-size: 0.92em } // 1.3 x 0.92 ~ 1.2

對於任何熟悉LESS，我使用，我想我應該能夠用它來爲我做計算，例如。使用訪問：

td h2 { font-size: h2['font-size']/td['font-size'] }

這至少會使用原始值做計算，但感覺就像是笨拙以上，此外，似乎少了不再支持存取反正。

這在概念上看起來很簡單，我覺得答案盯着我的臉，但我一直對我的頭撞了一會兒，無法在任何地方找到答案。

請幫忙！在這一點上，如果有人告訴我，它不能完成，並且可以繼續使用像素值，我會非常高興地相信它們！

來源

2011-03-22 Karen Brooks

OK，我會告訴你用像素） - 這是一個相對單位，就像時間，你爲什麼覺得你不能使用它們？ – clairesuzy 2011-03-22 17:50:04

px的姿勢可訪問性問題（無縮放），並且比使用相對單位（如rems）要難得多。 – Larry 2013-04-18 13:05:18

您是否考慮過向表單元格中的標題添加類？我認爲，額外的特異性水平會覆蓋層疊樣式相互混合的效果。

來源

2011-03-22 18:09:28

不是ems大衛他們從父母那裏繼承，不管怎麼樣（除非你把這個類設置爲像素，當然！）。他們ems與指定百分比是一樣的，只要你指定一個百分比，它就成爲「什麼」的百分比，這將是父母的現有（計算）的字體大小 – clairesuzy 2011-03-22 22:32:03

我會像我的問題一樣回答，使用像素！

像素是一個相對單位，它相對於屏幕分辨率，用戶可以設置自己想要的最小像素大小，並可以放大縮小像素。我冒昧地認爲，設計師在每個可感知的分辨率下逼近非像素字體大小比放鬆並讓瀏覽器工具處理它更困難？

它曾經是一種以像素爲單位聲明的字體不會在IE中調整大小，這對一些人來說非常煩人，如果用戶故意選擇以較低分辨率爲視覺原因而選擇查看時不容易訪問 - 那就是「em是最好的字體」的東西來自，但這是從來沒有真正的IE瀏覽器可以挫敗使用百分比，而是提供相同的問題;）..我記得當時尚是「小文本」，但後來惱火在非ie中發現CTRL +的樂趣......無論如何，像素大小的字體可以很好地縮放，如果你正在構建一個流體站點，你可以用em的寬度和像素的字體大小混合來構建它 - 如果它看起來像在你的分辨率下，嘗試縮放它，無論是向上還是向下 - 在變得難以辨認之前，你必須變得非常高或低，並且除了設計師之外，誰的縮放比它高得多/高;

來源

2011-03-22 22:40:29 clairesuzy

謝謝clairesuzy，那太棒了新聞！ – 2011-03-23 09:23:02

這是一個糟糕的建議。當你說*屏幕分辨率時*你可能意味着*桌面尺寸*（例如1600×1200像素）。你完全忽視每英寸點數*設置（例如120dpi），我甚至沒有談論現代Retina顯示器 - 這個功能已經存在很多年了。即使所有體面的瀏覽器都具有可觀的縮放比例，但在高分辨率顯示器中，默認情況下，以像素爲單位設置的字體看起來會很小你可能會說第一印象並不重要，用戶可以放大，但是，你可以使用'pt'並忽略瀏覽器之間的細微差異。 – 2013-04-17 12:16:32

不幸的是，px不是相對的 - 它們是固定的。 em和rem是相對的，因爲它們是根據父/祖輩/根元素的值計算得出的。 Rem的額外好處是它們不會混合在一起，並且您可以在單個聲明中修改整個文檔的字體大小 - 例如在主體選擇器上。使用px會影響可訪問性（不縮放）並且是維護的噩夢。 – Larry 2013-04-18 13:01:04

想要什麼可以通過使用rem單位來實現。

rem s是相對於em s，它們的計算基於在body元素上聲明的字體大小。

複合問題簡單地消失。

http://snook.ca/archives/html_and_css/font-size-with-rem是一個很好的文章來闡明這一點。

note： IE8需要一個px回退，但這不會成爲問題，因爲您已經在使用預處理器了。

編輯：我已經寫了薩斯混入其各自的px回退輸出rem S表示最CSS屬性： https://gist.github.com/larrybotha/4153104

來源

2013-01-15 20:24:45 Larry

複利相對字體大小：領養孩子的字體大小乾淨的方式，而不是父元素

回答

相關問題