CSS3-响应式布局

网页布局复杂的情况下，不考虑使用响应式布局

而网页布局不复杂的情况下，可以考虑使用响应式布局

媒体查询

媒体查询类型

媒体查询并没有任何的优先级，所以如果想要配置媒体查询的样式，需要将媒体查询写在正常的样式后

/* 只有在打印机或打印预览时应用的样式 */
@media print {
    
}

/* 只有在屏幕上才应用的样式 */
@media screen {
    
}

/* 一直都应用的样式 */
@media all {
    
}

全部的媒体查询类型：@media - CSS：层叠样式表 | MDN

媒体查询特性

orientation特性可以检测视口的旋转方向，以判断手机是否处于横屏状态

• portrait：视口处于纵向，即高度大于宽度
• landscape：视口处于横向，即宽度大于高度

/* 当视口宽度等于800像素时 */
@media (width:800px)
{
    
}

/* 当视口宽度小于等于800像素时 */
@media (max-width:800px)
{
    
}

/* 当视口宽度大于等于800像素时 */
@media (min-width:800px)
{
    
}

/* 当设备宽度等于800像素时 */
@media (device-width:800px)
{
    
}

运算符

可以用运算符连接多个媒体查询类型或媒体查询类型

• and：且运算符
• or：或运算符
• not：否定运算符

BFC

BFC时Block Formatting Context（块级格式上下文），可以理解元素的一个“特异功能”

该“特异功能”，在默认的情况下属于关闭的状态，当元素满足某些条件后，该“特异功能”被激活

所谓“激活特异功能”，就是该元素创建了BFC（又称：开启了BFC）

• 元素开启BFC后，其子元素不再产生margin塌陷问题
• 元素开启BFC后，自己不会被其他浮动元素所覆盖
• 元素开启BFC后，就算其子元素浮动，元素自身高度也不会塌陷

如何开启BFC

• 根元素
• 浮动元素
• 绝对定位、固定定位的元素
• 行内块元素
• 表格单元格：table、thead、tbody、tfoot、th、td、tr、caption
• overflow的值不为visible的元素
• 伸缩项目
• 多列容器
• column-span为all的元素（即使该元素没有包裹在多列容器中）
• display的值，设置为flow-root