CSS：移动端布局（视口，rem单位（视窗单位））
移动端布局
（1）布局概念
1. 静态布局
直接使用px作为单位 不推荐 不会适应屏幕
2. 流式布局
宽度使用%百分比，高度使用px作为单位
通常还会加上最大值和最小值
创建多个静态布局，每个静态布局对应一个屏幕分辨率范围。使用 @media媒体查询来切换多个布局
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
4. 响应式布局
通常是糅合了流式布局+弹性布局，再搭配媒体查询技术使用
5. 弹性布局
rem或em布局。rem是相对于html元素的font-size大小而言的，
em是相对于自身的font-size大小 1em = font-size的值
如果自己没有则相对自己最近的祖先font-size大小(其实也是相对于自己的font-size，因为font-size可以被继承)
如果所有的祖先都没有设置font-size属性，那么就会相对浏览器font-size的默认值大小，大部分浏览器默认都是16px
（2）视口 viewport
视口就是浏览器显示页面内容的屏幕区域，视口可分为布局视口，视觉视口和理想视口。
一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题
2、视觉视口visual viewport
字面理解是用户正在看到的网站区域，注意：是网站的区域
我们可以通过缩放去操作视觉视口，但不影响布局视口，布局视口仍保持原来的宽度
3、理想视口ideal viewport
在手机屏幕能显示完整的网页，并且不需要用户手动缩放调整页面大小，文字和网页元素宽高合适。
4、meta视口标签
在开发移动端页面，我们需要手动设置meta视口标签通知浏览器操作以达到使用理想视口的目的：
布局视口的宽度应该与理想视口宽度一致，简单理解就是设备有多宽，布局视口就多宽
| 属性 | 解释说明 | 标准viewport设置 |
|---|---|---|
| initial-scale | 初始缩放比，大于0的数字 0-1视口缩小 >1视口放大 | 视口缩放比例 |
| width | 宽度设置的是viewport宽度，可以设置device-width特殊值 | 视口宽度和设备保持一致 |
| maximum-scale | 最大缩放比，大于0的数字 | 最大允许的缩放比例1.0 |
| minimum-scale | 最小缩放比，大于0的数字 | 最小允许的缩放比例1.0 |
| user-scalable | 用户是否可以缩放，yes或no(1或0) |
（4）rem单位
-
em：以父元素的font-size来计算，如父元素的font-size: 16px ; 1em = 16px
-
rem：相对于根元素html标签的font-size来做计算，如html的font-size: 16px; 1rem = 16px
页面中计算大小的公式： 实际大小（rem） = 测量的大小（px）/ html的font-size大小（px）
视窗单位
-
vw : 1vw 等于视窗宽度的1%
-
vh : 1vh 等于视窗高度的1%
-
vmin : 选取 vw 和 vh 中最小的那个 700 * 900 100vmin
-
vmax : 选取 vw 和 vh 中最大的那个 1700 * 900 100vmax
calc计算
属性：值——calc（）函数
很多单位（px % em rem vh vw vmin vmax）可以与calc一起使用
运算符：+ - * / （+ -）要求都是长度，单位相同；（* /）要求第二个值没有单位；要求有空白空间，否则无效；
