1.视口概念

描述：视口，就是视图窗口的简称
      页面中视口的大小实际上就是html元素大小
说明：
      页面想要在移动端加载必须进行视口的配置
      如果不对页面进行调整，那么默认页面在移动端加载的时候，都认为视口宽度为980px

1.1解决方案

 描述：<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0" />
 说明：1.只要做移动端适配，就对页面添加此标签，此标签能够使得页面不再按照980px
       2.必要内容：
                  width=device-width 设置页面视口大小和设配尺寸大小相同
                  user-scalable=no 设置用户不可对页面进行放大缩小设置
                  initial-scale=1.0 设置页面加载倍率为1倍
       3.可选内容：
                   minimum-scale=1.0 设置页面最小缩小倍率为1.0
                   maximum-scale=1.0 设置页面最大放大倍率为1.0
 补充：这个标签在页面中并不是所有的移动端设备都能生效，几乎所有的移动端设备都不生效
 安卓的UC浏览器可以生效，chrome可以生效

2.rem单位

描述：rem 是css中的一个尺寸单位，和px，%，em等单位一样，都是用来设置大小的
      rem代表的含义为：[是html或者根元素的字体大小的多少倍]
语法：document.documentElement.style.fontSize=(document.documentElement.clientWidth/750)*100+'px';
      在750px大小的设备当中，1rem=100px；
      在350px大小的设备当中，1rem=50px；
解释：将设备的屏幕尺寸 划分为 设计稿的大小的750份；假设当前设备尺寸375，375/750=0.5的标准单位，此时 1rem=0.5px；
问题？因谷歌浏览器对字体大小的限制为16px，如果此时我们需要给一个div设置50rem的大小，那么这个div在350下就是25px；
如果此时手误设置成了5rem，那么这个div就是2.5px，问题就出现在这里，浏览器就是更正字体大小为16px；所以为了方便我们的计算，将它扩大一百倍。
为什么标准单位是按照750计算？
开发者和设计者之间的问题，现在比较流行的设计稿都是按照750设计的，不会按照设备的大小来做，比如350来做，因为太小了，所以按照750设计；
750的设计稿需要进行2倍图的换算，也就是要在375的设备上操作，因为iphone采用1像素=>2像素点，也就是在iphone屏幕上1像素点会存2像素点，也就是iphone像素高清。
示例：window.onresize = function () {
        //页面加载完，设置html字体大小
        //标准化rem标准单位的具体数值
      document.documentElement.style.fontSize =
            (document.documentElement.clientWidth / 750) * 100 + "px";
            };

2.1插件配合代码示例

vscode插件：下载px to rem & rpx & vw (cssrem)，点击扩展设置，找到rem进行配置。

插件配置示例图： 这里的单位设置为：根据设计稿计算过后的具体数值。如： 在750px大小的设备当中，1rem=100px； 在375px大小的设备当中，1rem=50px； 代码示例： 根据配置好的插件，直接写绝对单位px，插件会根据配置好的单位，进行换算。

3.第三方库插件

下载：
    上线依赖（生产环境依赖）：yarn add amfe-flexible 
    只在开发时依赖：yarn add postcss-pxtorem@5.0.0 -D

1.amfe-flexible
  amfe-flexible是配置可伸缩布局方案，用于计算跟标签的font-size的大小
2.postcss-pxtorem
  postcss-pxtorem是postcss的插件，用于将像素单位生成rem单位

amfe-flexible

1.下载
2.引入到min.js：import 'amfe-flexible';
例如：当前设备是375，viewWidth/10，font-size:37.5px;1rem=37.5px

postcss-pxtorem

1.下载
2.基于 vite 项目使用：在vite.confing.js 写入postcss-pxtorem 配置
  基于 vue cli 项目使用：新建postcss.config.js 写入配置
3.重启项目
postcss-pxtorem 的 REM 适配方案：把一行分为 10 份，每份就是十分之一
所以 rootValue 应该设置为我们设计稿的十分之一
假设：我们设计稿是750，rootValue 应该设置为 750 / 10 = 75
注意：vant 的设计稿是37.5的，vant 同时建议设置为37.5
例如：rootValue参数表示根元素的字体37.5px，那么转换后37.5px=1rem

import { fileURLToPath, URL } from "node:url";
import postcssPxtorem from "postcss-pxtorem";
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [vue()],
    resolve: {
        alias: {
            "@": fileURLToPath(new URL("./src", import.meta.url)),
        },
    },
    css: {
        postcss: {
            plugins: [
                postcssPxtorem({
                    rootValue: 37.5,
                    propList: ["*"],
                }),
            ],
        },
    },
});

// postcss.config.js
module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 37.5,
      propList: ['*'],
    },
  },
};

postcss-pxtorem其他设计稿尺寸

如果设计稿的尺寸不是 375，而是 750 或其他大小，可以将 rootValue 配置调整为:

// postcss.config.js
module.exports = {
  plugins: {
    // postcss-pxtorem 插件的版本需要 >= 5.0.0
    'postcss-pxtorem': {
      rootValue({ file }) {
        return file.indexOf('vant') !== -1 ? 37.5 : 75;
        // 如果是 vant 使用 37.5 否则使用 75-> 75为我们自己设计稿的尺寸
      },
      propList: ['*'],
      exclude:'styles' // 参数：文件名即可，不包含后缀
    },
  },
};