px(像素),屏幕的每一个小方块亮的不同颜色的灯组成了屏幕,每一个小方块,就是一个像素
em(相对长度单位),电脑的手机当你不给font-size是也会出现字体大小,这个就是设置的默认字体大小,所有未经调整的浏览器都符合: 1em=16px。根据这个计算,就可以算出默认字体大小对应的em,那么不同屏幕的默认不同,就会进行自适应和响应式
rem(根元素): root em就可以简单的理解为相对于root <html>元素的单位,

还有一些rpx、fpx等其实都是根据这些出发的,了解了这些再看就会简单

网址:px、em 和 rem 三者区别_cbkting的博客-CSDN博客_rem em px

Viewport视口

一、视口的划分:

这里只针对移动端, pc端没有这种转换和划分

注意:<meta name="viewport" content="width=device-width, initial-scale=1.0">

实验前把这一行代码删除,该meta标签的作用是让当前viewport的宽度等于设备的宽度，同时不允许用户手动缩放。

layout viewport 布局视口

简述:相对于980px布局的这个视口(比如PC视口)

visual viewport 视觉视口

简述:原本的区域是980px X 1743px, 手机端(375px X 667px)如果按照这个显示,肯定只能显示一部分,按比例缩小之后的这个视口称之为"视觉视口"

ideal viewport 理想视口

默认情况下的layout viewport 布局视口不适合移动端开发, 需要进行转换,利用标签<mate>对布局视口, 设置成我们想要的移动端视口,就是理想视口

手机端的视口: 红色方块100px X 100px 手机视口:375 X 667

显然小方块不是整个视口的1/3左右,那么这100px肯定不是相对于这个视口的

那么这个100px是相对于layout viewport 布局视口

当我们从pc端视口---布局视口, 转换为手机视口---可见视口时, 原本980px缩小为375px, 100px也会按照这个比例等比缩小

PC端的视口: 小方块100px X 100px

二、视口大小的更改

主要还是:<meta name="viewport" content="width=device-width, initial-scale=1.0">

content="width=device-width" 布局视口宽度 = 设备的宽度(手机宽度)

content="width=100px" 布局视口宽度 = 100px

如图所示:红色方块100px X 100px 占满整个视口

viewport属性各个参数：

width：viewport 的宽度，可以指定为一个像素值，如：600，或者为特殊的值，如：device-width （设备的宽度）。
height：viewport的高度。
initial-scale：初始缩放比例，即当浏览器第一次加载页面时的缩放比例。
maximum-scale：允许浏览者缩放到的最大比例，一般设为1.0。
minimum-scale：允许浏览者缩放到的最小比例，一般设为1.0。
user-scalable：浏览者是否可以手动缩放，yes或no。

移动端适配方法

痛点:移动端适配原因

改变: 使用px是绝对的大小, 要使用相对的大小才能进行自适应与响应式

注意:百分比(%)设置不常用, 不同参照物的百分比很难统一

一、rem(根倍率) + 动态的根标签的font-size

rem(根倍率)相对于根标签<html>的倍率变化

那么 --> 375px是视口宽度, font-size=20px 红色方快100px X 100px 1rem = 20px

红色方块设置 5rem X 5rem

现在的视口宽度为 414px 现在的红色方块 5rem X 5rem 只需要设置 font-size=28px

红色方块实际:140px X 140px

动态根标签:当视口变化时, 我们只需要改变<html>中的font-size大小就可以适配

1、媒体查询设置动态的html标签属性

这里的媒体查询动态是一个区间: min-width: 375px 至 min-width: 414px都是font-size: 20px;

所以rem的与font-size一样, 是根据视口的大小达到范围后进行变化, 而不是实时变化

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>viewport</title>
</head>
<body>
  <div class="box"></div>
</body>

  <style>
    @media screen and (min-width: 320px) {
      html {
        font-size: 12px;
      }
    }
    @media screen and (min-width: 375px) {
      html {
        font-size: 20px;
      }
    }
    @media screen and (min-width: 414px) {
      html {
        font-size: 28px;
      }
    }
    @media screen and (min-width: 480px) {
      html {
        font-size: 30px;
      }
    }
    @media screen and (min-width: 960px) {
      html {
        font-size: 60px;
      }
    }
    body {
      margin: 0;
      padding: 0;
    }
    .box {
      width: 5rem;
      height: 5rem;
      background-color: red;
    }
  </style>
</html>

2、通过JS动态计算<html>中的font-size

原理: 就是实时监听视口的宽度,拿到这个宽度,然后根据这个宽度就可以设置实时的html标签的font-size的值

虽然font-size可以实时变化了,但是rem的值计算却很麻烦

方法一: 引入scss或者less预编辑器, 用到的是可以使用函数

这里就使用函数相当于转换器, 输入的是px的大小,转换为rem

方法二: webpack插件(postcss-pxtorem)可以在打包的时候,把你的px换算为rem(原理同上)

方法三:VScode插件(px to rem & rpx & vw), 输入px值然后按照规定的快捷键

注意: 需要改根组件font-size的倍率: 37.49(原理同上)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>viewport</title>
</head>
<body>
  <div class="box"></div>
</body>

  <script>
    // 声明常量: 所有的HTML元素赋给htmlEl
    const htmlEl = document.documentElement
    // 声明常量: htmlEl元素的内部宽度
    //clientWidth属性表示元素的内部宽度，以像素计。该属性包括内边距，但不包括垂直滚动条（如果有）、边框和外边距。
    // const htmlWidth = htmlEl.clientWidth
    function setResize(){
      const htmlWidth = htmlEl.clientWidth
      const htmlFontSize = htmlWidth / 10
      htmlEl.style.fontSize = htmlFontSize + 'px'
    }

    // 解决第一次调用的问题:第一次是默认的16px
    setResize()

    // 给window添加一个事件监听---两个参数(监听参数的变化, 变化之后执行的函数)
    window.addEventListener('resize', setResize())
  </script>

  <style lang="scss" scoped>
    pxToRem(@px) {
      result: 1rem * (@px / 37.49);
    }
    body {
      margin: 0;
      padding: 0;
    }
    .box {
      width: pxToRem(100)[result];
      height: pxToRem(100)[result];
      background-color: red;
    }
  </style>
</html>

3、已经开源的库可以使用

lib-flexble

```
npm install lib-flexible --save
```
```
在main.js中引入import 'lib-flexble'
```

px2rem-loader

```
npm install px2rem-loader --save-dev
```
在根目录的vue.config.js文件中进行配置

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('css')
        .test(/\.css$/)
        .oneOf('vue')
        .resourceQuery(/\?vue/)
        .use('px2rem')
          .loader('px2rem-loader')
          .options({
            remUnit: 75
          })
  }
}

二、vw(视口宽度)---推荐

假设375px的这个设备为我们的设计时的标准设备

100vw = 375px 1vw = 3.75px

红色方块是 100px = 100/3.75 vw = 26.6vw

当变换成为iPone XR 为414px

100vw = 414px 1vw = 4.14px

26.6vw = 26.6 X 4.14 px = 110.1px

这样红色方块在视口中自动按照比例变大

那么我们在设计的时候,把大小全部使用vw,就可以实现适配

接上面的: 上面用的是函数来查取动态的视口宽度viewport width

vw就是视口宽度 100vw就是设备的视口宽度

那么设置如下:

<body>
  <div class="box"></div>
</body>
  <style>
    /* html {
      font-size: 10vw;
    } */
    body {
      margin: 0;
      padding: 0;
    }
    /* 这里的rem = 10vw 2.6667rem = 26.667vw*/
    .box {
      width: 26.667vw;
      height: 26.667vw;
      background-color: red;
    }
  </style>

三、flex(弹性布局)

display: flex弹性布局

flex（设置在子元素上）作用：可以让元素自动占用容器的可用空间，等比划分

flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto

通过上面的的方法我们已经可以实现这个页面的不同设备上的适配

痛点:电脑上是宽长高短, 手机上是宽短高长, 这也就决定了两者除了适配之外, 在布局上为了用户更加方便, 也必须适配

比如: 在电脑上面如果左侧有一个选项列表, 在移动端就要设计为抽屉

经典的圣杯布局: PC端的中间部分可能可以很大,但是在手机上中间部分就要小一点

这里用到最多的就是自适应 flex:1

痛点: 如果可以无限的放大或者缩小, 太大还好,当太小时, 有的文字或者一些表单看不见或者按不到,

解决办法: 要么就禁止缩放, 要么就设置一个最小的font-size的值/视口