需求前景：

有这样的一个需要：小陈收到一个设计稿，需要将一个活动页面设计稿静态化，不过UI小妹子说，电脑端打开这个页面不能变形，需要兼容一下，小陈想了想，回了句没问题！

前端rem和vw单位结合，pc端也能正常视图打开移动端！-QUI-Notes

针对这个设计要求，前端要实现一个单页面（活动页面，可以视为单页面），兼容pc不同设备，方法有很多，例如：

  • 1.使用bootstrap框架里面的响应式栅格布局，不同分辨率将container的宽度设置为手机物理比例，pc打开居中显示，wap打开，宽度设置为100%；
  • 2.不适用框架，就使用css的media查询一个个主流分辨率兼容；
  • 3.使用100%或者vw单位，然后再兼容不同主流分辨率；
  • 4.使用rem单位，不同分辨率仅仅需要修改根元素的font-size就可以了。
  • ...

当然还有其他或者更好的方法，我们将上面的方法分析一下。方法一：引入一个插件，有点浪费啊，大材小用不说，css文件还大，过于臃肿，不推荐！方法二、三，需要自己写不同分辨率的css，改变元素大小，也是非常麻烦。那么就剩下我们今天要说的第四种。

关于REM这个单位，我在之前总结过一篇《移动端REM单位换算》，里面分别总结了几种px，vw等单位转为REM的方法，这里不再啰嗦。

实现代码：

那么针对这样的需求，先上完成的css: 

html { font-size: calc( 100vw / 7.5); }
@media(min-width:768px){
html { font-size: calc( 100vw / 35); }
body{width: 414px;height: 736px;margin:0 auto;overflow-y: auto;overflow-x: hidden;}
}
@media(min-width:920px){
html { font-size: calc( 100vw / 24); }
}
@media(min-width:1400px){
html { font-size: calc( 100vw / 30); }				
}
@media(min-width:1600px){
html { font-size: calc( 100vw / 35); }
}

在这里，我使用的是移动端优先的原则，分辨率从小到大兼容，默认的rem将页面分割成7.5份，1rem≈13.3333..vw，假如当前屏幕分辨率为1928*1080，那么1rem≈140px，同理你也可以换算其他分辨率的实际像素，当然你也可以将根rem分成自己需要的等份，比如100vw/10，都是可以的。

注意：

使用了REM之后，你的字体单位，盒子大小，边框大小都需要转化为rem，就不要再用vw/px/rpx等单位了。

为什么采用这样的写法？

因为css的适配率高，写出手机端的样式之后，仅需要根据不同分辨率，调整根rem的大小就可以适配了，这样就不需要再特别的一遍遍的写css。

当然，应用rem的应用场景不仅仅像我这样使用，也可以做网站的时候，全站都使用rem布局，先想一想你是不是可以省很多代码了