檢測相關字體大小幷包含塊寬度

設計流體佈局和可調整大小的文本網頁時，必須始終記住相關字體大小（對於em的單位）幷包含當前樣式元素的塊寬度（百分比單位）。這是一段時間，總是要警惕父元素的寬度，或者如果修改了當前元素或其祖先的字體大小。檢測相關字體大小幷包含塊寬度

使用Dynamic Stylesheets（如Sass或Less）很容易實現混合或功能，它們關注em和百分比計算背後的數學運算（簡單分割），因此您可以用像素來編寫大小並忘記翻譯，但無論如何，您必須提供相關的字體大小和內容塊寬度，因爲據我所知，無法自動欺騙它們。

你知不知道是否有一類實用程序來自動化？是否做了某些努力以某種方式實現它？

來源

2011-10-14 Waiting for Dev...

您是否嘗試基於容器寬度設置字體大小？ – Benxamin

不，我正在談論以em爲單位設置任何垂直空間（行高，填充頂部，填充底部）的樣式（所以與相關字體大小有關），以及任何水平空間（寬度，pagging-left，padding-右）以百分比爲單位（相對於包含塊寬度）。 –

您不能使用父級的計算屬性值來設置CSS中子級的屬性。 LESS或SASS不會改變這一點。但大小可以相對於其父（或使用rem單位時的根）進行設置。

>No, I'm talking about styling any vertical space (line-height, padding-top, padding->bottom) in em units (so relative to relevant font size)

相關字體大小是父級的設置字體大小。當您將子元素的字體大小定義爲0.5em時，其字體大小將比其父級的字體大小小50％。

您可以使用Less/SASS來聲明例如0.5em作爲變量。這使您可以在一個地方進行更改和編輯。

更少

@basefont: 1em; 
@smallfont: 0.5em; 

section { 
font-size: @basefont; 
article { 
font-size: @smallfont; // or @basefont/2; 
} 
} 

footer { 
font-size: @smallfont; 
}

和任何水平空間（寬度，pagging左，填充右）以百分比單位（所以相對>在包含塊寬度）。

百分比單位已經相對於父母（含有方塊）。

來源

2014-10-21 21:59:59

晚但是正確;） –

檢測相關字體大小幷包含塊寬度

回答

相關問題