需求前景:

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

针对这个设计要求,前端要实现一个单页面(活动页面,可以视为单页面),兼容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份,1rem13.3333..vw,假如当前屏幕分辨率为1928*1080,那么1rem≈140px,同理你也可以换算其他分辨率的实际像素,当然你也可以将根rem分成自己需要的等份,比如100vw/10,都是可以的。

注意:

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

为什么采用这样的写法?

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

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