h5移动端适配

px：是分辨率的尺寸单位
em：相对于父元素
rem：相对于HTML根元素
vw：视口宽度的 1/100，vh：视口高度的 1/100

rem结合js实现适配

新建rem.js方法，在main.js引用该方法

// 设置 rem 函数
const baseSize = 32;

// 设置 rem 函数
function setRem() {
	// 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要修改。
	const scale = document.documentElement.clientWidth / 750
	// 设置页面根节点字体大小
	document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
	//rem会导致缩放到低于1px的元素时隐时现，解决办法：Math.min(scale, 2)指定最小转换像素，对于比较小的像素，不转换为 rem 或 vw
}

// 初始化
setRem();
// 改变窗口大小时重新设置 rem
window.onresize = function () {
	setRem()
}

不足：
1、计算麻烦，计算后可能会出现小数像素，浏览器会对这部分小数四舍五入，按照整数渲染
2、cursor: pointer 元素点击背景变色的问题，对添加了cursor:pointer属性的元素，在移动端点击时，背景会高亮。为元素添加tag-highlight-color:transparent 属性可以隐藏背景高亮。

使用postcss-px-to-viewport插件适配

1.下载安装npm i postcss-px-to-viewport -D
2.在根目录新建.postcssrc.js

module.exports = ({ file }) => {
    return {
        plugins: {
            autoprefixer: {}, // 用来给不同的浏览器自动添加相应前缀，如-webkit-，-moz-等等
            "postcss-px-to-viewport": {
                unitToConvert: "px",// 要转化的单位
                viewportWidth: file.dirname.includes(path.join('node_modules', 'vant')) ? 375 : 750,// UI设计稿的宽度，vant相关的文件视口宽度为375px。path.join('node_modules', 'vant')是因为适应不同的操作系统，在mac下结果为node_modules/vant，而在windows下结果为node_modules\vant
                unitPrecision: 6,// 转换后的精度，即小数点位数
                propList: ["*","!letter-spacing"],// 指定转换的css属性的单位，*代表全部css属性的单位都进行转换，除了letter-spacing
                viewportUnit: "vw",// 指定需要转换成的视窗单位，默认vw
                fontViewportUnit: "vw",// 指定字体需要转换成的视窗单位，默认vw
                selectorBlackList: ['wrap'],// 指定不转换为视窗单位的类名，只要类名包含有wrap这个字符串，就不会被匹配
                minPixelValue: 1,// 默认值1，小于或等于1px则不进行转换
                mediaQuery: true,// 是否在媒体查询的css代码中也进行转换，默认false
                replace: true, // 是否转换后直接更换属性值
                exclude: [/^((?!collectionVisual).)*$/],// 设置忽略文件，用正则做目录名匹配，此为只转换collectionVisual文件夹
                landscape: false // 是否处理横屏情况
            }
        }
    }
}

不足：
1、postcss-px-to-viewport虽然好用，但是却有一个缺点，就是只对style内的样式进行转换，行内样式没办法转换；
2、vw/vh存在一些兼容性问题

参考：https://www.cnblogs.com/zhangnan35/p/12682925.html

利用meta标签对viewport进行控制

viewport：移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域

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

width：可视区域的宽度，值可为正整数或关键词device-width
intial-scale：页面首次被显示是可视区域的缩放级别，取值1.0则页面按实际尺寸显示，无任何缩放
maximum-scale=1.0：允许用户的最大缩放值
minimum-scale=1.0：允许用户的最小缩放值
user-scalable：是否可对页面进行缩放，no 禁止缩放， yes代表允许缩放

不足：
1、如果屏幕尺度跨度太大，相对设计稿过大或者过小的屏幕不能正常显示，在大屏手机或横竖屏切换场景下可能会导致页面元素被拉伸变形，字体大小无法随屏幕大小发生变化。
2、设置盒模型的不同属性时，其百分比设置的参考元素不唯一，容易使布局问题变得复杂

参考：https://blog.csdn.net/qq_42039281/article/details/83281074

媒体查询器

@media only screen and (min-width: 375px){
    样式1
}
@media only screen and (min-width: 750){
    样式2
}

不足：
1、要匹配足够多的设备与屏幕，一个web页面需要多个设计方案，工作量比较大
2、通过媒体查询技术需要设置一定量的断点，到达某个断点前后的页面发生显著变化，用户体验不太友好