移动端视口（viewport）和布局

视口

两种像素： 物理像素和 CSS 像素。

1. 物理像素：分辨率，设备屏幕的物理像素。
2. CSS 像素：由web开发者提供，是 CSS 中使用的一个抽象单位。

三个视口： 布局视口（Layout Viewport）、视觉视口（Visual Viewport）和理想视口（Ideal Viewport）

1. 布局视口是移动端默认的布局视口，早期解决pc端界面在手机端显示的问题
2. 视觉视口是用户正在看到的网站的区域。
3. 理想视口是给定设备物理像素的情况下，最佳的布局视口。

布局

流式布局（百分比布局）；rem布局；flex布局；

flex布局
通过给父元素添加flex属性，控制子盒子的位置和排列方式

1. flex-derection：设置主轴方向 [row / column-reverse]
2. justify-content：设置主轴上子元素的排列方式 [flex-star / center / space-around平分剩余空间 / space-between贴边再平分]
3. flex-wrap:设置是否换行
4. align-content：侧轴子元素排列方式（多行）
5. align-item：侧轴子元素排列方式（单行）[center]
6. flex-flow:复合属性，flex-derection和flex-wrap的合写

rem适配布局
rem是单位，是html根元素的字体大小
媒体查询：针对不同屏幕尺寸设置不同样式

@media screen and (max-width:800px){
	body{
		backgound-color:red
	}
}

响应式布局：使用媒体查询。使用bootstrap框架（栅格系统）。
栅格系统：container容器，划分为12份。通过行列排列。row、col-lg/md/sm/xs-所占份数[大屏/中屏/小屏/超小屏]。