媒体查询技术

1. 响应式网站

响应式是一种网页设计的技术做法，该设计可使网站在不同的设备上浏览时对应不同分辨率皆有适合的呈现

2. 媒体查询的判断条件

（1）媒体类型
all 所有媒体
screen 彩屏设备
print 打印机和打印预览
speech 应用于屏幕阅读器等发声设备

（2）媒体查询的逻辑关键词
and 和
not 非
only 限制某种媒体设备

（3）媒体查询的参数条件
(width:600px) 宽
(max-width:600px) 最大宽度
(min-width: 480px) 最小宽度
(orientation:portrait) 竖屏
(orientation:landscape) 横屏

3. 媒体查询方式

（1）方式一(内联样式)

        div {
            width: 100px;
            height: 100px;
            background-color: blue;
        }
        /* 当设备宽度在400到500之间时，div显示红色 */
        @media screen and (min-width: 400px) and (max-width: 500px) {
            div {
                background-color: red;
            }
        }

（2）方式二（外部样式）

    <link rel="stylesheet" href="css/index.css" media="screen and (min-width: 400px) and (max-width: 500px)">

        .box {
            width: 100px;
            height: 100px;
            background-color: blue;
        }

/* css/index.css */
div.box {
    background-color: red;
}