移动端单位解析
手机端开发单位到底用什么?
目前有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里的所有浏览器都是壳。。。
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。