在rem布局中使用vw

最近在知乎上看了这个问题 为什么很多web项目还是使用 px，而不是 rem？，看得大神们讨论，看得也是晕晕的，我也不知道自己看懂没有，整体看下来，比较赞成这个观点：

大屏手机让用户看到的更多，而不是看到的更大

目前移动端兼容不同屏幕尺寸基本上都是rem布局，rem布局的本质是 对页面的等比缩放，就像是一张图片的放大缩小，这个方案在手机上还可以，但是把给iphone7设计的页面用rem原封不动扩展到ipad上，就会发现很灾难(好歹限制一下根元素字体的值)字体和图片都巨大。最理想的状态还是要对平板等大屏设备再加一个设计稿，响应式开发。除去平板设备的话，我觉得用rem适配是没啥问题的。

然后，我把项目中的rem尝试用vw稍微改了一下，为什么要用vw，vw是viewport的百分比单位，1vw等于百分之一的viewport宽度(layout viewport，也可以跳过这个概念)，要做到对设计稿对等比缩放，直接用这个单位是最简单的，而且现在兼容性好像没什么问题，传统的rem还要写一个脚本，所以尝试一下vw

我的工作流程是这样的：

1. 拿到设计稿，一般是以iphone678为基准的(750px宽)，然后用蓝湖转化成1倍的代码，开发时直接拷贝蓝湖生成的样式。
2. 在工程中使用pxtorem转换(pxtorem可以将代码里的px根据自己定义的rootValue值换算成rem)，rootValue设置为16，为什么是16，因为我们在第一步的时候是按一倍图来写的，如果哪天不想用rem了，可以直接，把pxtorem去掉，代码还直接还原成px
3. 在css最前面加入关于html的字体设置，我用的less

.font-size(@sizeValue:16) {
  @vw: 16 / 375 * 100;
  @result: @sizeValue / 16 * @vw;
  font-size: ~"@{result}vw";
}
html {
  .font-size(16);
}
html {
  //限制根元素最大最小字体值，只在320-480之间使用vw
  @media screen and (max-width: 320px) {
    font-size: 16px;
  }
  @media screen and (min-width: 480px) {
    font-size: 18px;
  }
}
body {
  max-width: 1000px;
  min-width: 320px;
  margin: auto;
}
复制代码

完毕，可能有很多错误，欢迎评论指出～

转载于:https://juejin.im/post/5cefa5b8f265da1b827a80f7