web移动端适配方案：
第一种：rem实现原理
rem是一个倍数单位，它是基于html的font-size的倍数。只要我们在不同的设备上设置一个合适的初始值，当设备发生变化font-size就会自动等比适配大小，从而在不同的设备上表现统一。
如vue项目中使用rem适配步骤：
第一步：下载npm下载插件————帮我们自动将px单位转换成rem单位
npm install postcss-px2rem --save
第二步：在根目录src中新建util目录下新建rem.js等比适配文件
// rem等比适配配置文件
// 基准大小
const baseSize = 14
// 设置 rem 函数
function setRem () {
// 当前页面宽度相对于 1920宽的缩放比例，可根据自己需要修改。
const scale = document.documentElement.clientWidth / 1920
// 设置页面根节点字体大小（“Math.min(scale, 2)” 指最高放大比例为2，可根据实际业务需求调整）
document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function () {
setRem()
}
第三步，”在main.js中引入适配文件
import './util/rem'
第四步，到vue.config.js中配置插件
// 引入等比适配插件
const px2rem = require('postcss-px2rem')
// 配置基本大小
const postcss = px2rem({
// 基准大小 baseSize，需要和rem.js中相同
// remUnit: 14 代表 1rem = 14px; 所以当你一个14px值时，它会自动转成 (14px/14)rem
remUnit: 14
})
// 使用等比适配插件
module.exports = {
lintOnSave: true,
css: {
loaderOptions: {
less: {
javascriptEnabled: true,
},
postcss: {
plugins: [
postcss,
],
},
},
},
}
第二种： 媒体监听
媒体监听通过@media实现。注意：媒体监听不是等比缩放！！！是同一块内容在不同设备上有合理的表现。
比如在PC端一行能同时展示4个元素块，而在移动端只能一行展示1个或者2个元素块(要不看不清)。
/* 3. 针对适配的设备重新写一套样式 */
@media screen and (max-width: 750px){
.header{
position: relative;
height: 40px;
}
.header .header-c{
width: 100%;
}
.header .nav{
position: absolute;
width: 100%;
left: 0;
top: 40px;
}
.header .nav .nav-item{
float: none;
width: 100%;
height: 40px;
background-color: pink;
border-bottom: 1px solid gray;
line-height: 40px;
}
}
第三种：百分比方案
使用 百分比% 定义 宽度，高度 用px固定，根据可视区域实时尺寸进行调整，尽可能适应各种分辨率，通常使用max-width/min-width控制尺寸范围过大或者过小。下表是子元素不同属性设置百分比的依据
第四种：vh/vw方案
使用 css 预处理器把设计稿尺寸转换为 vw 单位，包括 文本，布局高宽，间距 等，使得这些元素能够随视口大小自适应调整。
web不同单位之间的区别：
1 、px
px就是pixel（像素）的缩写，相对长度单位，相对于屏幕分辨率。
2、em
参考物是父元素的font-size，具有继承的特点。浏览器默认字体是16px，整个页面内1em不是一个固定的值。
3、rem
rem是CSS3新增的一个相对单位，但相对的只是HTML根元素。通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。
4、%
% 百分比，相对长度单位，相对于父元素的百分比值
