什么是移动端适配？

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

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

认识视口

在一个浏览器中，我们可以看到的区域就是视口（viewport）；fixed就是相对于视口来进行定位的

但是在移动端，布局的视口和你可见的视口是不太一样的，我们可能会希望一个大的网页在移动端可以完整的显示；所以在默认情况下，移动端的布局视口是大于视觉视口的；

在移动端，我们可以将视口划分为三种情况：

布局视口（layout viewport）：它会按照宽度为980px来布局一个页面的盒子和内容；为了显示可以完整的显示在页面中，对整个页面进行缩小；相对于980px布局的这个视口，称之为布局视口

视觉视口（visual layout）：按照980px显示内容，那么右侧有一部分区域就会无法显示，所以手机端浏览器会默认对页面进行缩放以显示到用户的可见区域中；那么显示在可见区域的这个视口，就是视觉视口

- 理想视口（ideal layout）：默认情况下布局视口并不适合我们进行布局；可以进行宽度和缩放的设置，以满足正常在一个移动端窗口的布局；这时候可以设置meta中的viewport；

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

概念区分：www.quirksmode.org/mobile/view…

适配方案

百分比设置：不同属性的百分比值，相对的可能是不同参照物，所以百分比往往很难统一；所以百分比在移动端适配中使用是非常少的
rem单位+动态html的font-size：

我们只需要考虑两个问题：

问题一：针对不同的屏幕，设置html不同的font-size；

// 方案一：媒体查询
@media screen and (min-width: 320px){
  html{
    font-size: 12px;
  }
}

// 方案二：编写js代码
const htmlEl = document.documentElement // 拿到HTML元素

function setRemUnit() {
          const htmlWidth = htmlEl.clientWidth // 拿到视口宽度
          const htmlFontSize = htmlWidth / 10  // 计算font-size的大小
          htmlEl.style.fontSize = htmlFontSize + 'px' // 设置html样式
        }
setRemUnit() // 第一次进来可以设置font-size
window.addEventListener('resize',setRemUnit)  // 当屏幕尺寸变化实时监听屏幕宽度
        
// 方案三：lib-flexible库（github上搜索）,可以直接引用

问题二：将原来要设置的尺寸，转化成rem单位；

// 方案一：less/scss函数，使用混入加映射
.pxToRem(@px){
  result:1rem * (@px / 37); // 设计稿的大小
}

.box{
  width: .pxToRem(100)[result];
  height: .pxToRem(100)[result];
  font-size: .pxToRem(14)[result];
}

// 方案二：使用postcss-pxtorem插件，真实开发可以借助于webpack的工具来完成自动的转化

// 方案三：VSCode插件:px to rem 的插件，在编写时自动转化，需要配置设计稿的大小

vw/wh单位:更推荐使用viewport的两个单位vw、wh

vw相比于rem的优势：

优势一：不需要去设置、计算html的font-size大小

优势二：不会因为设置html的font-size大小，而必须给body再设置一个font-size，防止继承

优势三：因为不依赖font-size的尺寸，所以不用担心因html的font-size尺寸被篡改，页面尺寸混乱

优势四：vw相比于rem更加语义化，1vw刚才是1/100的视口的大小

优势五：可以具备rem之前所有的优点
flex的弹性布局

CSS-移动端适配

什么是移动端适配？

认识视口

适配方案