Rem 方案

通过页面根元素html中的font-size的大小来集体设置1rem的值，个人理解页面上所有元素全部按照比例排列好，所有元素按照rem调整，进而达到适配目的

在工程化项目中，需要引入postcss-pxtorem外部依赖，通过设置postcss.config.js ，可以将项目中px自动转化为rem单位，需要注意vant UI库，vant是基于375写的，需要进行特殊配置

module.exports = { 
    "plugins": { 
        "postcss-pxtorem": { 
            rootValue({ file }) { 
                return file.indexOf('vant') !== -1 ? 37.5 : 75; 
            }, 
            propList: ['*'] // 需要被转换的属性 
         } 
    } 
}

vw、vh(viewport) 方案

viewport方案即是使用vw/vh作为样式单位。vw、vh将viewport分成了一百等份，1vw等于视口1%的宽度，1vh等于视口1%的高度。 按照设计稿宽度计算1px 等于 多少vw，进而计算出所有组件的vw值，设置所有组件的长宽（单位为vw），从而达到适配目的

100 / 设计稿宽度 = vw / 设计稿组件宽度

在工程化项目中，需要引入postcss-px-to-viewport，通过设置postcss.config.js ，可以将项目中px自动转化为viewport单位，同时需要兼容vant UI组件库

module.exports = ({ file }) => { 
const vwUnit = file && file.indexOf('vant') !== -1 ? 375 : 750; 
    return { 
        plugins: { 
            'postcss-px-to-viewport': { 
                viewportWidth: vwUnit, // 设计稿的宽度 
                unitPrecision: 5, // 转换后的位数，即小数点位数 
                viewportUnit: 'vw', // 转换成的视窗单位 
                propList: ['*'], // 要进行转换的属性，如果某个属性不进行转换，只需在其前加个“!”即可 
                selectorBlackList: [], // 不进行转换的选择器 
                minPixelValue: 1, // 小于或等于1px则不进行转换 
                mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false 
             }, 
         }, 
     }; 
 };

大屏适配方案

除以上两种方案外，还可以使用scale属性进行适配

主要思想，按照实际长宽像素对比设计稿的长宽像素点，选最小值进行scale属性设置，进行整体屏幕缩放适配，需要注意的是，实际长宽比如果不是设计稿的长宽比，需要对大屏背景进行优化