chrome中使用rem做單位,寬高計算數值不可用

2021-08-11 00:28:01 字數 1614 閱讀 1678

下面三圖為chrome的計算結果:

**設定:html

可以發現同樣為1.6rem,字型大小正常計算得到16px,而padding-right不是16px.

示例1

html

div.test

示例2

html

div.test

可以發現,chrome對字型大小的計算相對來說更為準確,但也有使用者提出當html的font-size為10px有時字型計算也會出錯(**為何rem在chrome瀏覽器上計算出錯)。為保險起見,不使用此方案。

若要考慮到寬度適應縮放,那麼目前的解決方案僅有設定

html
但相應的計算會變得複雜。我們都知道,設了62.5%後就有1rem = 10px,便於用rem來指定元素的尺寸,這樣響應式的時候可以直接改變font-size而無需計算其他各種樣式中出現的尺寸了。用rem定義尺寸的另乙個好處是更能適應縮放/瀏覽器設定字型尺寸等情況(因為rem相對於字型大小,會同步改變)。

至於選擇62.5%而非10px的原因

主要是相容性和未來發展趨勢的綜合考慮,px這個單位的含義已經越來越混亂,幾乎無法評估以後的裝置是會一直像現在這樣對網頁上的px做相容處理,還是讓px回歸「畫素」的本意,但62.5%代表預設字型尺寸的62.5%這個含義基本不會有混亂

實際開發中如果不用em尺寸技術,那麼62.5或10px都是多餘的。

(2)ie6相容

如果用10px那麼在 ie6 下就不能縮放了。你知道,62.5%這個技巧出現的時間很早,那時候 ie6 的份額還比較大,ie6 下的縮放很簡陋,只提供了字型大小的調節(特大、較大、中、較小、特小五個檔),並且如果元素用的是px單位,那麼調節字型大小就不起作用(用em%不會)。確切地說 ie10 以前都有這個問題,但是從 ie7 就有了頁面縮放,字型大小、可以同時放大,基本上用不著前面那個功能了。

所以用62.5%就是為了照顧 ie6,那麼問題來了,為什麼也不用0.625em?還是 ie6 的問題,用了em以後在調節字型大小的時候比例因子會偏大,比如同樣調到特大,0.625em要增加得比62.5%多一點,用百分比在各瀏覽器中的比例因子都是一致的。

桌面瀏覽器預設頁面字型大小是16px,這種情況下設定成具體畫素大小或者對應的百分比,看起來的效果是一樣的,但是其他型別的裝置的預設字型大小不一定是16px,特別是高解析度的裝置,16px大小的字型在它們上面看起來會非常小,所以不能在body上設定具體畫素值,設定成百分比,可以按照裝置的基準字型大小給編寫的網頁設定好最適合使用者瀏覽的字型大小。

最重要的不是螢幕實際的畫素大小,螢幕上文字的可讀性才是最重要的。

如何使用rem單位

最近搞移動端,真是被rem em與px的換算要了老命了,看了不少文件,似乎弄明白了,這不今天用又矇圈了。好多文件上老是說用rem就給html設定font size,用em就給body設定font size 看了下bootstrap樣式表,html body 其他樣式略哈,就講這兩個主要的。可惜大姐長...

如何使用新單位rem

手機端需加上第一條,pc無視 1 需要先加上 手機端獲取物理裝置尺寸 1 2 viewport content width device width,minimum scale 1,maximum scale 5,user scalable no 獲取手機端物理裝置尺寸 2 先初始化頁面預設的字型大...

rem單位使用法

css3的出現,他同時引進了一些新的單位,包括我們今天所說的rem。在w3c官網上是這樣描述rem的 font size of the root element 下面我們就一起來詳細的了解rem。前面說了 em 是相對於其父元素來設定字型大小的,這樣就會存在乙個問題,進行任何元素設定,都有可能需要知...