对于rem，基本是给 html/body 元素定义一个字体大小，来作为整个页面的参考值。在移动端可以做到适配不同的手机分辨率，如果保持整体缩放，没有设计上的差异可以不需要用到media query。
例如一个PSD，视觉稿是按照750px宽度*1080px高度来设计，那么我们完全可以按照设计稿的尺寸设置浏览器尺寸，然后按照视觉稿上的尺寸来赋值给元素样式，比如视觉稿标尺显示宽度是50PX，我们可以直接写width:50px;页面中所有尺寸都按照这样来写。
之后只需要设置页面的rem大小：
html {
font-size: calc(100vw/7.5);
}
100vw是设备的宽度，除以7.5可以让1rem的大小在750宽度的屏幕下等于100px（之所以让1rem等于100px，而不是1rem等于1px，是因为在chrome下针对中文的最小字体是12px）。
之后替换页面中的单位，把所有的px单位替换成rem，除以100，比如前面的50px，就是0.5rem这样在750屏幕下，所有元素的尺寸还是和视觉稿的尺寸一样。
而在其他尺寸的设备中，因为设备的宽度变小了，100vw/7.5得到的值，会相应的变小，即rem的单位值会变小，页面中所有的尺寸会等比例缩放。
这样就可以做到针对任何分辨率的设备保持视觉一致了。最后，前面用到vw单位，但是低版本的设备可能不支持，那么我们可以用JS来处理：
javascriptdocument.documentElement.style.fontSize = window.innerWidth/7.5+ 'px'
网友评论