css-视口，rem,vw

em: 1个em等于当前字体的大小 如果说当前没有字体大小 会找最近祖先元素的字体大小 如果说全部祖先都没字体那么就是浏览器默认的字体大小
rem 根据的是root（html）的字体大小 如果root没设置字体大小默认就是浏览的默认字体大小

1rem = 37.5px 100px / 37.5
rem设置方式 设置 搜索 root -Root Font Size- 设计稿的宽度/10

vw
公式：100vw / 设计稿的总宽度 * 元素尺寸的大小
安装px to vw rem
设置 - 搜索vw
- px2vw - 写上设计稿的尺寸就可以了

vh
vh：view height 视图的高度
100vh = 当前设备的高度

视口
<!-- 设置视口 width:布局视口有多宽 device-width:设备的宽度-->
<!-- <meta name="viewport" content="width=375px"> -->
<!-- 让视口永远是理想视口 -->
<!-- <meta name="viewport" content="width=device-width"> -->
<!-- user-scalable禁止用户页面缩放 有一些浏览器是无效的 -->
<!-- , minimum-scale=1.0, maximum-scale=1.0, user-scalable=no -->
<!-- initial-scale 用户的缩放比 -->
<!-- minimum-scale：最小的缩放比 -->
<!-- maximum-scale：最大的缩放比 -->
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
<!-- <meta name="viewport"
content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> -->
视觉视口
你眼睛看到的这一个屏幕区域就是视觉视口
布局视口
存放页面的区域 在移动端默认是980px
理想视口
当布局视口等于视觉视口的时候就是理想视口

模板设置 设置-用户代码片段-html.json - 定义
"vpw": {
"prefix": "vpw", // 触发的关键字 输入vh按下tab键
"body": [
"<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no\">"
],
"description": "移动端视口"
},