媒体查询

1.媒体查询可用于检测很多事情，例如：

1. viewport(视窗) 的宽度与高度
2. 设备的宽度与高度
3. 朝向 (智能手机横屏，竖屏) 。
4. 分辨率

目前很多针对苹果手机，Android 手机，平板等设备都会使用到多媒体查询。

2.语法

1.直接在link中判断设备的尺寸，然后引用不同的css文件

<link rel="stylesheet" type="text/css" href="a.css" media="screen and (min-width: 400px)">

当屏幕的宽度大于等于400px的时候，应用 a.css

2.另一种方式，即是直接写在 style 标签里或css文件中

@media screen and (max-width: 600px) { /*当屏幕尺寸小于600px时，应用下面的CSS样式*/
  body {   
      background: #ffffff;
  }
}

3.媒体类型（mediaType）

4.媒体功能

更多功能见菜鸟教程多媒体查询

5.多媒体简单示例

1. 在屏幕可视窗口尺寸小于 480 像素的设备上修改背景颜色：

@media screen and (max-width: 480px) {
    body {
        background-color: lightgreen;
    }
}

2.当浏览器的宽度在 520 到 699px, 邮箱链接前添加邮件图标：

@media screen and (max-width: 699px) and (min-width: 520px) {
    ul li a {
        padding-left: 30px;
        background: url("");
    }
}

注意：and后一定要用空格隔开

6.常见设备的宽度

超小屏幕（手机） 768px以下
小屏设备（平板） 768px-992px
中等屏幕 992px-1200px
大屏设备（现代电脑 1200px以上