1.响应式布局如何实现

1.响应式布局如何实现

1. 百分比布局
   利用属性设置百分比来适配不同屏幕
   百分比相对于父元素，可以设置的属性有：宽、高、内边距、外边距。
2. rem布局
   是根据HTML元素的font-size的值进行动态计算

```javascript
**funcion rem(){
	获取文档和body
	var HTML = document.documentElement||doument.body
	让html文字大小等于屏幕宽度/7.5
	html.style.fontSize=html.clientWidth/7.5+"px"
	}
///调用函数
rem();
window.onresize（改变大小时触发）=function(){
	rem()
}**

3. 媒体查询
   @media（美的a) 类型 and (条件1) and (条件二)
   {
   css样式
   }

例：
	@media screen（屏幕,死渴瑞） and (max-width:980px ) {
	 body{
	 background-color: red;
	 }
	}

4. vw布局

根据 PSD 文件宽度或高度作为标准，元素单位 px 转换为 vw 或 vh，比 如font-size: 12px，PSD 文件宽度 375，转换公式 12 * 100 / 375，则 样式改为font-size: 3.2vw

5. 弹性布局
   display：flex 设置 给父元素设置display：flex,给子元素flex:1,text- algin:center