移动端单位解析
手機端開發單位到底用什么?
?
目前有3種,px,em ,rem
?
PC端大部份是用px單位,小部分用em單位,而移動端,請全部用rem單位吧。目前大部份設備,包括但不限于iOS 5+、Android 2.3+、Window Phone 8+都是可以兼容的。
?
rem是什么?
相對長度單位,相對于根元素(即html元素)font-size計算值的倍數。
rem用法很簡單,就是根標簽html設置文字大小后(不設置的話,大部份瀏覽器默認為16px),其他標簽設置rem都是html大小的倍數。
?
html{
??? font-size: 10px; /* 設置html為10px */
}
h1{
??? font-size: 2rem; /* 10px*2=20px */
}
那為什么移動端要使用rem作為單位?一是我開始提到的,移動端大部份都支持,不需要考慮兼容問題;二是修改起來靈活。如果你要整個網頁字體都變大兩倍,直接修改html{font-size:20px}即可。
?
你肯定會說,百度Google搜出來的文章,大部份是讓設置為html{font-size:62.5%}。他的作用也是把html設置成10px,但萬 一哪個瀏覽器2b升級成默認文字大小不是16px怎么辦?而且可以直接設置成10px,為什么要去用62.5%算成10px?這不是脫褲子放屁嗎?所以我 都是直接設置10px。-----------(10px )÷ (16px )× 100% = 62.5%
?
如果只介紹這點東西,網上一搜一大堆,我也就不會寫這篇文章了。關鍵是大規模使用中遇到bug了,而且是蛋疼的原生Chrome。。。iOS平臺的Chrome沒問題,據說iOS里的所有瀏覽器都是殼。。。
轉載于:https://www.cnblogs.com/chenrong/p/4538038.html
總結
- 上一篇: $(this).attr(checked
- 下一篇: 5月16日 AJAX