瀏覽器預設的字型大小一般是16px,但是可以自己設定。ie無法調整那些使用px作為單位的字型大小,國外大部分**能夠調整的原因在於使用了em作為字型單位em 基於父元素的字型大小
rem的大小是基於html字型的大小
所有未經調整的瀏覽器都符合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 布局,獲取視窗的寬除以 乙...