八、响应式布局
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;