谈谈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`的函数。

不过这些都是后话了。