响应式布局之媒体查询

响应式布局之媒体查询

在我们写网页时候，大家可能有考虑到过，我们网页是不是应该跟着屏幕大小也随之变化，而要想达到这种效果就要用到我们的C3所新增的媒体查询（@media）来实现，根据页面的宽度来实现不同布局效果。

什么是媒体查询

媒体查询（Media Query）是CSS3新语法。可以针对不同的媒体类型定义不同的样式；可以让我们根据设备显示器的特性（如视口宽度、屏幕比例）为其设定CSS样式；当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

媒体查询语法规范

基本语法

@media mediatype  and | not | only (media feature) {
  //css样式
} 

1.mediatype查询类型

查询类型，有以下几个值

值	解释说明
all	用于所有设备
print	用于打印机和打印预览
screen	用于电脑屏幕，平板电脑，智能手机等
speech	应用于屏幕阅读器等发声设备

2.关键字

关键字将媒体类型或多个媒体特性连接到一起做为媒体查询的条件。

and：可以将多个媒体特性连接到一起，相当于“且”的意思。
not：排除某个媒体类型，相当于“非”的意思，可以省略。
only：指定某个特定的媒体类型，可以省略。

3.媒体功能

屏幕/设备的尺寸：

值	解释说明
width	输出设备中的页面可见区域宽度。
min-width	输出设备中的页面最小可见区域宽度
max-width	输出设备中的页面最大可见区域宽度
height	输出设备中的页面可见区域高度
min-height	输出设备中的页面最小可见区域高度
max-height	输出设备中的页面最大可见区域高度
aspect-ratio	输出设备中的页面可见区域宽度与高度的比率
orientation	输出设备中的页面可见区域高度是否大于或等于宽度

显示质量：

值	解释说明
resolution	设备的分辨率
scan	电视类设备的扫描工序
grid	用来查询输出设备是否使用栅格或点阵

颜色：

值	解释说明
color	输出设备每一组彩色原件的个数。如果不是彩色设备，则值等于0
color-index	在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表，则值等于0

4.书写规范

为了防止混乱，媒体查询我们要按照从小到大或者从大到小的顺序来写,但是我们最喜欢的还是从小到大来写，这样代码更简洁
例如：

@media screen and (max-width: 768px) {
            div {
                width: 100%;
                height: 100px;
            }
            .one {
                background-color: black;
            }
            .two {
                background-color: teal;
            }
            .three {
                background-color: wheat;
            }
        }
        
        @media screen and (min-width: 768px) and (max-width: 992px) {
            div {
                width: 100%;
                height: 100px;
            }
            .one {
                background-color: skyblue;
            }
            .two {
                background-color: pink;
            }
            .three {
                background-color: cadetblue;
            }
        }
        
        @media screen and (max-width: 1200px) {
            div {
                width: 100%;
                height: 100px;
            }
            .one {
                background-color: black;
            }
            .two {
                background-color: teal;
            }
            .three {
                background-color: wheat;
            }
        }
        
        @media screen and (min-width: 1200px) {
            div {
                width: 100%;
                height: 100px;
            }
            .one {
                background-color: rgb(222, 240, 216);
            }
            .two {
                background-color: springgreen;
            }
            .three {
                background-color: hotpink;
            }
        }