自适应布局OR响应式布局

自适应布局

根据请求用户的设备不同，来判断当前访问的设备室PC/Mobile，服务器端返回针对对应设备类型实现的页面

特点和问题

1. 需要开发多套不同布局的页面，开发量成倍增加；
2. 服务端需要正确判断访问设备类型，ua判断不精准；

适合场景

1. 适合差异巨大的终端可以采用多页面方案；
2. 不合适尺寸差异相近的手机，从成本考虑只能使用同一个布局；

响应式布局

响应式布局指的是服务器始终只返回同一页面，该页面的不同屏幕尺寸下，在客户端动态实现不同的布局。

特点

1. 只需要一个页面；
2. 在客户端根据屏幕大小来显示合适的页面样式；
3. 页面缩放控制/布局调整；

方案

flex布局

元素固定大小，间距动态变化

.flexBox{
	display:flex;
 	justify-content:space-between;
 }
 .flexItem{
 	width:50px;
  	height:50px;
  }

flex布局问题： 大尺寸屏幕下，元素显得很小，间距很大很空

媒体查询

1. @media指定媒体查询规则
2. 编写对应规则的css块
3. 当且仅当媒体查询与正在使用其内容的设备匹配时，该css快才能用于该文档

@media screen and (max-width:768px){
	.block{
	    background-color:green;
	}
}

媒体查询的问题：兼容各种设备工作量大，兼容的屏幕尺寸越多，代码量越大

百分比布局

根据浏览器的宽度和高度，使用百分比来计算组件的宽和高。浏览器的大小变化，元素的大小和间距也随之变化。

谁的百分比？

1. top,bottom：非static父元素高度；
2. height：父元素的高度；
3. width：父元素的宽度；
4. left，right：非static父元素的宽度；
5. margin，padding：父元素的宽度；
6. translate：自身的宽/高；
7. border-radius：自身的宽/高；

百分比布局存在问题：缩放并没有完全等比例

缺点：

1. 计算困难：设计稿px=>百分比；
2. 各个属性的百分比单位不统一；
3. 字体无法用百分比实现缩放效果；

REM响应式布局

页面所有元素和间距都保持相同比例缩放，来适配不同尺寸的屏幕。

原理：

1. 页面的所有css样式统一单位rem，即根元素html的fontSize大小；
2. 根据屏幕尺寸不同来改变根元素html的fontSize，那么当rem单位的大小变化的时候，元素的大小也会成比例缩放，这样就能适配不同大小的屏幕；
3. 在所有css加载前设置html的fontSize;(当然可以直接将html{font-size:2vw}而不需要用js去计算
4. 在页面resize/orientationchange之后：页面的宽度改变，重新计算rem；

缺点：

1. 横屏下，页面放大过大；
2. 横屏下，fixed元素会堆积在屏幕上；

VW，VH布局

css3新增的css单位：

1. vw:视窗宽度的1%;
2. vh:视窗高度的1%;