八、响应式布局，百分比布局，和弹性布局 felx

八、响应式布局

1、百分比布局

（1）子元素的宽高百分比设置：

①手动计算百分比 width：30%

②利用计算函数属性， width：calc(子元素宽 / 父宽 * 100% )  运算符号前后空格,计算高同理

（2）版心的百分比布局设置

避免版心出现左右滚动条，设置版心的宽度100%，设置最大宽度。即如下：

.w {   width: 100%;    max-width: 800px;   margin: 0 auto;

}

免费字体：阿里 iconfont

2、媒体特性（媒体查询条件）

（1）常见宽高表示：

min-width最小宽度  max-width最大宽度

min-height 最小高度 max-height最大高度

（2）媒体查询写法：  

@media  screen  and （max-width：400px）{

div {   xxxxxx;  }

}

@media  screen and （max-width：400px） and  （min-width：200px） {

div {  xxxxx;  }

}

3、横屏与竖屏

（写在媒体查询中 and 后面的括号里）

@media screen and (orientation：landscape){   }

（1）横屏orientation：landscape；

（2）竖屏 orientation：portrait；