移动端布局VW与rem的区别

 

目录

前提

rem

rem的弊端与优点

vw

vw单位实现弹性布局

vw单位和百分比%单位对比

总结

---

前提

前提原因：昨天心血来潮，更换了一下手机壁纸，顺便把手机字体大小给设置了一下，谁知道今天打开项目app的时候，字体样式都变了，惊呆了老铁这是什么表演。后来看了下文档，是rem的问题，辛亏用的px，不然修改的可太麻烦了。其实这个bug也好比微信小程序，更改微信字体大小，小程序也可能遇到这种问题。

所以，个人建议移动端最好使用vw，小程序使用rpx。

rem

先简单说下rem：官当文档是这样说的

rem是css中的长度单位，1rem=根元素html的font-size值。当页面中所有元素都使用rem单位时，你只需要改变根元素font-size值，所有元素就会按比例放大或者缩小。因此我们只需要写一小段js代码，根据屏幕宽度改变html的font-size值，就可以做到弹性布局。这种方法确实便捷，兼容性也很好，是目前非常主流的弹性布局方案。

rem的弊端与优点

rem弹性布局，在html文件头部放入一大段压缩过的js代码很难受，但vw能让你的代码更纯粹.

弊端之一：和根元素font-size值强耦合，系统字体放大或缩小时，会导致布局错乱；

弊端之二：html文件头