web移动端实现响应式布局解决方案

1、移动端的响应式布局主要用到rem，并且rem要跟随页面的尺寸改变而不断调整，两者缺一不可。
2、本文没有采用flexible方案，该方案主要是使用js监听window的size，进而改变rem数值；
3、采用rem+vw是当前比较合适的解决方案；

flexible.css

// 对应750px稿图
html{font-size:13.33333333vw}
// 尺寸过大的兼容方案
@media (min-width: 560px) {
  html {
    font-size: 54px;
  }
}

在UI稿是750px的情况下，750px对应100vw，合1px是0.13333333vw；为了方便换算乘100，相当于html的font-size是100px；此时对于14px的字体来说就是0.14rem；由于vw本身就是相对单位，他会根据屏幕尺寸动态改变，所以省去了js监听size的步骤；
加入是375px稿图，则是26.66666666