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

不过这些都是后话了。