上个周周末,接手了一个移动端的(外包)小项目,一直着手于PC端,对移动端还是一知半解,所以这也是我的一个挑战,因此,今天心血来潮,总结一些移动端的基础知识和技巧供自己以后方便查阅,欢迎大家补充或转载:
一.单位(px,em,rem)
1.px:屏幕设备物理上能显示出的最小的一个点,不同设备上点的长宽,比例不一定相同;
2.em/rem:相同点:都是一个相对大小的值;不同点:em是相对父级元素,rem是相对html(默认值视浏览器而定,Chrome的默认为16px);
rem单位在移动端前端开发很流行。rem单位确实好处蛮多的,它是相对于根节点,让我们整个网站单位可以统一。还可以让我们的字体更好的自适应网站的大小,但是,你用过了就知道,它会出现一个问题:用Chrome浏览器打开你做的网站的时候,有时候会出现字体很大的情况。但是刷新一下页面就好了。
之所以会出现这种情况,原因是因为我们为了计算方便,将原本默认1rem=16px修改1rem=10px;因此,我们在html中通常做了如下设置:
html{ font-size:62.5%;/*10÷16×100=62.5% 1rem=10px*/ }但是呢,Chrome浏览器有时候会忽略了html的设置,于是在初始化页面的时候,出现了上面字体过大的情况。仔细
