最优适配布局

Posted 2020-10-28 Blackatall

移动端的响应式布局需要通过设置 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 }