移動開發 rem適配問題

2021-08-21 11:42:50 字數 849 閱讀 6971

瀏覽器預設的字型大小一般是16px,但是可以自己設定。

em 基於父元素的字型大小

rem的大小是基於html字型的大小

ie無法調整那些使用px作為單位的字型大小,國外大部分**能夠調整的原因在於使用了em作為字型單位

所有未經調整的瀏覽器都符合1em=16px;那麼12px=0.75em,10px=0.625em。

為了簡化font-size的換算,需要在css中的body選擇器中宣告font-size=62.5%,這就使得em的值變為16px*62.5%=10px。 這樣的話12px=1.2em,14px=1.4em

em特點:

em的值並不是固定的

em會繼承父級元素的字型大小

所以我們在寫css的時候,需要注意:

body選擇器中宣告font-size=62.5%

將你的原來的px數值除以10,然後換上em作為單位

重新計算那些被放大的字型的em數值。避免字型大小的重複宣告。

比如說#content中宣告了字型1.2em,那麼在宣告p的字型大小只能是1em。因為此em非彼em。它因繼承#centent的字型高而變成了1em=12px.

r是root根元素,html中根元素是html.

rem的大小是基於html字型的大小

假設有三個裝置:320px、480px、640px

@media (min-width:320px)

}@media (min-width:480px)

}@media (min-width: 640px)

}

移動端rem適配

3 使用js 將設計圖劃分為10等份或者15等份。新建common.less檔案,這是乙個專門來適配的檔案。我們大概可以寫如下的檔案 設定常見的螢幕尺寸 修改裡面的html文字大小 a 一定要寫到最上面 html 我們此次定義的劃分的份數 為 15 no 15 320 media screen an...

移動端rem適配

前端在開發移動端頁面時,通常會使用rem對不同解析度的 螢幕進行適配,以達到更好的視覺效果。直接貼上 複製可用。一 function doc,win 乘以100,px rem 100 1 docel.style.fontsize 100 width uidpr px recalc if doc.ad...

移動端適配rem

p.p1 p.p2 p.p3 p.p4 p.p5 span.s1 span.s2 span.s3 span.s4 span.s5 span.s6 span.s7 span.s8 span.s9 span.s10 span.s11 span.s12 現在前端大多數是用rem 布局,獲取視窗的寬除以 乙...