移动端布局
- 针对比较复杂的网页，将移动端和pc端进行分离开发
屏幕尺寸
-
英寸：值屏幕对角线的距离，一英寸约等于2.54厘米
-
像素：指屏幕上的一个发光点，
- 物理像素：屏幕上的一个发光点
- 逻辑像素：物理分辨率/像素密度
- 查询网站：uiiiuiii.com/screen/inde…
视口
-
布局视口：在屏幕中设置了一个固定宽度作为屏幕的显示宽度
-
常见布局视口大小：
-
-
视觉视口：将布局视口中的宽度全部放在视觉视口当中，会导致看到的页面元素过小，可能造成页面错乱
-
理想视口：让页面的100%等于逻辑分辨率，呈现最佳的大小尺寸，在代码中添加下列标签表示开启理想视口
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scablabel=yes">width=device-width：设置宽度为设备屏幕的宽度initial-scale=1.0：表示初始缩放比列user-scablabel=yes：是否允许用户进行缩放
相对单位
| 单位 | 描述 |
|---|---|
| em | 相对于当前标签的字体大小倍数：1em 为当前标签字体的一倍 |
rem | 相对于当前html的字体大小倍数：1em 为当前标签字体的一倍 |
| vw | 相对于当前页面视口宽度的1% |
| vw | 相对于当前页面视口高度的1% |
屏幕适配
- 采用相对单位
rem进行页面布局，进入页面时通过检测当前页面宽度，动态更改根标签的字号
