在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;
}
复制代码

完毕，可能有不少错误，欢迎评论指出～