移動端rem設置字體


css中設置字體單位有三種:px,em,rem

px是絕對單位,用px設置字可以保證設置的精准度;

em比較繁瑣,所以現在移動端的web流行使用rem作為字體相對單位;

rem是一種相對單位,相對於本頁面的根字體大小而設置;通常用法:

html{

  font-size:62.5%;

}

設置跟字體為62.5%即網頁的默認字體一般為16px,這樣設置可以令1rem == 10px方便計算;

針對大小屏幕的適應問題可以通過媒體查詢的方法重新設置跟字體大小適應不同大小的手機屏幕eg:

html{font-size:10px}
@media screen and (min-width:321px) and (max-width:375px){html{font-size:11px}}
@media screen and (min-width:376px) and (max-width:414px){html{font-size:12px}}
@media screen and (min-width:415px) and (max-width:639px){html{font-size:15px}}
@media screen and (min-width:640px) and (max-width:719px){html{font-size:20px}}
@media screen and (min-width:720px) and (max-width:749px){html{font-size:22.5px}}
@media screen and (min-width:750px) and (max-width:799px){html{font-size:23.5px}}
@media screen and (min-width:800px){html{font-size:25px}}


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM