移动端的屏幕尺寸指屏幕对角线的长度，一般用英寸来度量，也可用px 设备分辨率是生产屏幕时就固定了，它不能被改变 逻辑分辨率是由软件（驱动）决定的
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, minimum-scale=1,user-scalable=no">
width=device-width：作用是设置视口宽度=设备宽度
initial-scale=1.0:作用设置缩放1倍(不变)
maximum-scale=1.0：作用是设置最大缩放比为1
user-scalable=no :控制是否允许用户双击 手指 捏合的手势来缩放网页
1、vw
vw：相对单位，相对于屏幕大小，100vw = 屏幕宽度
使用方法：
举例：适配屏幕宽度为375的屏幕，屏幕中某个元素为100px
计算方法：100vw * 100 / 375
css用法：
/* 一个宽为100px的元素 */
width： calc(100vw * 100 / 375);
/* 缺点：太麻烦 */
使用vscode插件：
1、下载：px2vw【vscode插件】
2、修改配置项
// vw 屏幕宽度 数字写入要适配的屏幕宽度，方便自动计算尺寸
"px2vw.width": 375,
2、rem（此方法逐渐更替为vw）
rem：相对单位，相对于HTML跟标签字体大小
html {
font-size: 100px;
/* 此时 1rem = 100px */
}
使用方法：
举例：适配屏幕宽度为375的屏幕，屏幕中某个元素为100px
首先需设置html标签字体大小为37.5px
计算方法：10rem * 100 / 375
css用法：
html {
/* 缺点：设置过后无法自动根据屏幕宽度计算尺寸 */
font-size:37.5px
}
div {
width:calc(10rem * 100 / 375 )
}
缺点：设置 html标签字体大小 过后无法自动根据屏幕宽度计算尺寸
优化：导入 手淘 的js文件 fixible.js 即可解决【也不需要再自己设置html字体大小】
使用vscode自动计算尺寸：
1、下载 px to rem & rpx(cssrem) 【vscode插件】
2、设置配置项
// rem 屏幕宽度 数字为屏幕宽度 / 10
"cssrem.rootFontSize": 37.5
