移动端界面布局适配方案

自适应和响应式

1、自适应：根据不同的设备大小来自动调整尺寸、大小

2、响应式：会随着屏幕的实时变动而自动调整，是一种自适应；

移动端视口

能看到的区域就是视口。viewport

fixed就是相对于视口来进行定位的。

在PC端视口就只有一个，不需要对视口进行区分。布局视口和视觉视口就是同一个。

<meta name="viewport" content="width=device-width,initial-scale=1.0"

meta中，是禁止在移动端进行等比例缩放。pc端页面在移动端等比例缩放之后，字太小了，看不清。

布局视口

移动端的布局视口，可不是视觉视口【就是显示页面的区域】

移动端的布局视口980px，我们写的像素如果是100px，那么到视觉视口中会等比例缩放的。但是还是显示100px

所以我们要改变布局视口的大小

设置布局视口的宽度

<meta name="viewport" content="width=200px"

<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalabel=no,maximum-scale=1.0,minimum-scale=1.0">

initial-scale：定义设备宽度与viewport大小之间的缩放比例

maximum-scale 定义缩放的最大值

minimum-scale 定义缩放的最小值

user-scalable yes/no 将无法缩放当前页面

将布局视口设置为视觉视口之后，就不会等比例缩放了。100px在哪里都是100px，是一个绝对单位。

适配方案

1、百分比设置

因为不同属性的百分比设置，相对的可能是不同的参照物，所以百分比往往比较难统一。

所以百分比在移动端适配中使用是比较少的；

2、rem单位+动态的html的font-size

3、vw单位

4、flex的弹性布局

媒体查询，动态设置font-size

<style>
    @media screen adn (min-width:375px){
        html{
            font-size:24px;
        }
    }
    
    @media screen adn (min-width:441px){
        html{
            font-size:28px;
        }
    }
</style>

rem的font-size尺寸

可以通过媒体查询设置不同尺寸范围的html的font-size尺寸

缺点：

1、我们需要针对不同的屏幕编写大量的媒体查询

2、我们如果动态改变尺寸，不会实时的进行更新【范围超出到另外一个阶梯时，才会发生变化】

js动态计算font-size

<script>
      const htmlEl = document.documentElement;
      function setFontSizeUnit () {
        const htmlWidth = htmlEl.clientWidth;
        const htmlFontSize = htmlWidth / 10;
        htmlEl.style.fontSize = htmlFontSize + "px";
      }
      setFontSizeUnit();
       //页面调整
      window.addEventListener("resize",setFontSizeUnit);
      //页面后退前进
      window.addEventListener("pageShow",function (e) {
          if(e.persisted){
              setFontSizeUnit();
          }
      })
</script>

lib-flexible库

Rem单位换算

1、手动换算

2、less/sass

index.less

.pxToRem(@px){
    return: 1rem * (@px / 37.5);
}
.box{
    width: .pxToRem(100)[result]
}

3、postcsss-pxtorem

4、借助vscode插件

VW换算

1vm==屏幕的1/100

与rem做对比

1、rem事实上是作为一种过度的方案，它利用的也是vw的思想

2、不管是自己写的js，还是flexible的源码，都是将1rem等同于设计稿的1/10，在利用1rem计算，相对于整个尺寸的大小。

VM的优势

1、不需要动态计算html的font-size的大小，所以也不会去依赖

2、更加语义化。可以具备rem的所有优点。

VW的换算过程

设计给的375的设计稿 1vw=3.75px

.box{
    width:calc(100/275) vw;
}