移动端的响应式布局需要通过设置 media queries 配置多个断点，在响应断点切换的瞬间带来断层式的切换变化，用户体验不佳。
而采用 rem 单位的弹性布局，又需要脚本依赖（头部内嵌：监听分辨率变换，根元素字体随之变换的脚本），耦合不佳。
解决方法：利用 视口单位vw + rem 实现适配（已主流）。
了解：1vw 等于视口宽度的 1%，移动端，PC 端都是视口宽度 100vw，高度 100vh。
总结与示例：
1.给根元素大小设置随着视口变化的 vw 单位，这样就可以实现动态改变其大小。
2.限制根元素字体大小的最大最小值，配合 body 加上最大宽度和最小宽度。
1 // rem 单位换算：定为 75px 只是方便运算，750px-75px、640-64px、1080px-108px，如此类推 2 $vw_fontsize: 75; // iPhone 6尺寸的根元素大小基准值 3 @function rem($px) { 4 @return ($px / $vw_fontsize ) * 1rem; 5 } 6 // 根元素大小使用 vw 单位 7 $vw_design: 750; 8 html { 9 font-size: ($vw_fontsize / ($vw_design / 2)) * 100vw; 10 // 同时，通过Media Queries 限制根元素最大最小值 11 @media screen and (max-width: 320px) { 12 font-size: 64px; 13 } 14 @media screen and (min-width: 540px) { 15 font-size: 108px; 16 } 17 } 18 // body 也增加最大最小宽度限制，避免默认100%宽度的 block 元素跟随 body 而过大过小 19 body { 20 max-width: 540px; 21 min-width: 320px; 22 }
