网易移动端rem适配方案摘录

需要设置 wiewport

@media screen and (max-width: 320px) {
    html {
        font-size: 42.667px;
        font-size: 13.33333vw;
    }
}
@media screen and (min-width: 321px) and (max-width: 360px) {
    html {
        font-size: 48px;
        font-size: 13.33333vw;
    }
}
@media screen and (min-width: 361px) and (max-width: 375px) {
    html {
        font-size: 50px;
        font-size: 13.33333vw;
    }
}
@media screen and (min-width: 376px) and (max-width: 393px) {
    html {
        font-size: 52.4px;
        font-size: 13.33333vw;
    }
}
@media screen and (min-width: 394px) and (max-width: 412px) {
    html {
        font-size: 54.93px;
        font-size: 13.33333vw;
    }
}
@media screen and (min-width: 413px) and (max-width: 414px) {
    html {
        font-size: 55.2px;
        font-size: 13.33333vw;
    }
}
@media screen and (min-width: 415px) and (max-width: 480px) {
    html {
        font-size: 64px;
        font-size: 13.33333vw;
    }
}
@media screen and (min-width: 481px) and (max-width: 540px) {
    html {
        font-size: 72px;
        font-size: 13.33333vw;
    }
}
@media screen and (min-width: 541px) and (max-width: 640px) {
    html {
        font-size: 85.33px;
        font-size: 13.33333vw;
    }
}
@media screen and (min-width: 641px) and (max-width: 720px) {
    html {
        font-size: 96px;
        font-size: 13.33333vw;
    }
}
@media screen and (min-width: 721px) and (max-width: 768px) {
    html {
        font-size: 102.4px;
        font-size: 13.33333vw;
    }
}
@media screen and (min-width: 769px) {
    html {
        font-size: 102.4px;
        font-size: 13.33333vw;
    }
}

原理

• 移动端的设计稿一般是width：750px；
  新的css3 规定 100vw = 100%；
  我们可以得出：750px = 100vw；
  那么1px = 100 / 750 vw = 0.13333vw；
  100px = 13.33vw；
  1rem = 13.33.vw; 7.5rem = 100vw;
  rem = 移动端的尺寸 / 100；

• 设置font-size = px,是为了兼容不识别vw的设备（虽然移动端几乎看不到了），计算原理及方法为：
  设备的宽度为变量Width；
  要想与设计稿的效果一样，就要进行等比例缩放，
  假设设计稿 1rem = 100px；（与vw方式一致了）
  此时我们需要求出另一个设备的根元素font-size值（X）为多少；
  根据这些信息我们可以推导出以下这个公式：
  Width/X=designwidth（750）/100=7.5;
  得
  X=Width*100/desingWidth;