Bootstrap 学习笔记（二）响应式布局-媒体查询

响应式布局：

媒体查询

@media mediatype and|not|only (media feature) {
    CSS-Code;
}
           

@media
           

媒体查询的固定格式

mediatype
           

媒体查询的类型

screen 计算机屏幕（默认值） 手机屏幕等

print 打印预览模式 / 打印页

speech 发声设备

all 适合所有设备

and|not|only
           

条件连接符

media feature
           

判断条件

语句	解释
device-height	定义输出设备的屏幕可见高度
device-width	定义输出设备的屏幕可见宽度
max-device-width	定义输出设备的屏幕可见最大宽度
min-device-width	定义输出设备的屏幕可见最小宽度
max-device-height	定义输出设备的屏幕可见最大高度
min-device-height	定义输出设备的屏幕可见最小高度
max-width	定义页面的可见最大宽度
min-width	定义页面的可见最小宽度
max-height	定义页面的可见最大高度
min-height	定义页面的可见最小高度

CSS-Code;
           

当满足判断语句条件时执行的语句

语句案例

/* 设置媒体查询，在不同宽度下的body背景颜色 */
	body{
		background-color: red;
	}
/* 宽度小于768 */

/* max-width:768px 当前页面的最大宽度要小于768px */
@media screen and (max-width:768px){
	body{
		background-color: green;
	}
}

/* 当前页面的宽度在768px~992px */
@media screen and (min-width:768px) and (max-width:992px) {
	body{
		background-color: blue;
	}
}
/* 当前页面的宽度在992px~1200px */
@media screen and (min-width:992px) and (max-width:1200px) {
	body{
		background-color: pink;
	}
}
/* min-width:1200px 当前页面的宽度大于1200px */
@media screen and (min-width:1200px) {
	body{
		background-color: purple;
	}
}

           

媒体查询语句的两个特点

1. 向上兼容：如果设置了宽度更小的样式，默认这些样式也会传递到宽度更大的条件范围内。
2. 向下覆盖：宽度更大的样式会将全面宽度更小的样式覆盖。

在使用媒体查询语句的时候，遵循两个原则

1. 如果是判断页面宽度的最小值(min-width)，那么，就从小到大写

2. 如果是判断页面宽度最大值(max-width)，那么，就从大到小写

   *. 其中Bootstrap就是从小到大写的方式。