媒体查询与响应式设计-优快云博客

一、媒体查询的意义
可以让我们根据设备显示器的特性（如视口宽高、屏幕比例、设备方向：横向或纵向）为其设定CSS 样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有 width 、 height 和 color （等）。使用媒体查询，可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果。
二、多媒体类型
在这里插入图片描述
三、多媒体查询的语法
多媒体查询由多种媒体组成，可以包含一个或多个表达式，表达式根据条件是否成立返回 true 或 false。

@media not|only mediatype and (expressions) {...; }

逻辑操作符

and 操作符用来把多个媒体属性组合成一条媒体查询，对成链式的特征进行请求，只有当每个属性都为真时，结果才为真。
or将多个媒体查询以逗号分隔放在一起；只要其中任何一个为真，整个媒体语句就返回真
not 操作符用来对一条媒体查询的结果进行取反。
only 操作符仅在媒体查询匹配成功的情况下被用于应用一个样式，这对于防止让选中的样式在老式浏览器中被应用到。
若使用了not或only操作符，必须明确指定一个媒体类型。

四、媒体查询
媒体查询多用于响应式网页中，一般采用流式布局。
1、对响应式网页做初始化设置

 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

参数：

name=“viewport”：标记显示设备为视口；
width = device-width：视口的宽度等于当前设备的宽度；
initial-scale：初始的缩放比例（默认设置为1.0）；
minimum-scale：允许用户缩放到的最小比例（默认设置为1.0）；
maximum-scale：允许用户缩放到的最大比例（默认设置为1.0）；
user-scalable：用户是否可以手动缩放（默认设置为no，因为我们不希望用户放大缩小页面）。
2、兼容性处理
因为IE浏览器(IE8)不支持HTML5和CSS3中的media，所以要加载用于解决IE浏览器兼容性问题的JS文件：

<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->

四、案例
下面我们用媒体查询做一个简单的案例

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>图片自适应</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
        border: 0;
    }

    body,
    html {
        height: 100%;
        width: 100%;
        box-sizing: border-box;
    }

    #box {
        width: 100%;
        height: 100%;
    }

    img {
        width: 33%;
        float: left;
    }

    @media screen and (max-width : 500px) {
        img {
            width: 100%;
        }
    }
</style>

<body>
    <div id="box">
        <img src="img/img (1).jpg" alt="">
        <img src="img/img (2).jpg" alt="">
        <img src="img/img (3).jpg" alt="">
    </div>
</body>
</html>