谈谈css3的字体大小单位[rem]

最近接收了一份面试题,内容是移动端传播的H5(在中国通常这么叫)广告页。

秉承移动端web尽量少用px的概念,我使用rem进行了一次重构。对于rem,基本是给 html/body 元素定义一个字体大小,来作为整个页面的参考值。在移动端可以做到适配不同的手机分辨率,如果保持整体缩放,没有设计上的差异可以不需要用到`media query`。

在这份PSD中,设计师的视觉稿是按照640px宽度*900px高度来设计的,那么我们完全可以按照设计稿的尺寸设置浏览器尺寸,然后完全按照视觉稿上的尺寸来赋值给元素样式,比如视觉稿标尺显示宽度是50PX,我们可以直接写width:50px;页面中所有尺寸都按照这样来写。

之后只需要设置root单位,即页面的rem大小:

html {
font-size: calc(100vw/6.4);
}

其中100vw是设备的宽度,除以6.4可以让1rem的大小在640宽度的屏幕下等于100px(之所以让1rem等于100px,而不是1rem等于1px,是因为在chrome下针对中文的最小字体是12px)。

之后替换页面中的单位,把所有的px单位替换成rem,除以100,比如前面的50px,就是0.5rem这样在640屏幕下,所有元素的尺寸还是和视觉稿的尺寸一样。

而在其他尺寸的设备中,因为设备的宽度变小了,100vw/6.4得到的值,会相应的变小,即rem的单位值会变小,页面中所有的尺寸会等比例缩放。

这样就可以做到针对任何分辨率的设备保持视觉一致了。最后,前面用到vw单位,但是低版本的设备可能不支持,那么我们可以用JS来处理:

javascriptdocument.documentElement.style.fontSize = window.innerWidth/6.4 + 'px'

或者使用:

@media only screen {
html{
font-size: 30px;
}
}
@media only screen and (max-width: 479px) and (min-width: 321px) {
html {
font-size: 15px;
}
}
@media only screen and (max-width: 320px) {
html {
font-size: 13px;
}
}

昨晚实现完之后,发现了很多可以改进的地方:

在如此多的绝对定位和相对定位下,使用less去计算css尺寸会轻松很多。

写css的时候,可以直接写rem单位,按视觉稿除以100,其实也没有什么计算过程。

或者用预处理器的话,也可以写一个`px2rem`的函数。

不过这些都是后话了。

上一篇:bat计算两个时间差


下一篇:[转]PhoneGap使用PushPlugin插件实现消息推送