CSS3媒体查询

CSS媒体查询

媒体查询（Media Query）是CSS3新语法

使用@media查询，可以针对不同的媒体类型定义不同的样式
@media可以针对不同的屏幕尺寸设置不同的样式(主要价值)
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面
媒体查询一般按照从大到小或者从小到大的顺序来
目前针对很多苹果手机、Android手机，平板等设备都用得到多媒体查询

语法规范

@media mediatype and | on | only (media feature) }
CSS-code;
}

  1. 用@media开头 注意@符号
  2. mediatype媒体类型
  3. 关键字 and not only
  4. media feature 媒体特性 必须有小括号包含

mediatype查询类型

将不同的终端设备划分成不同的类型，称为媒体类型

值	设备类型
All（常用）	所有设备
Braille	盲人用点字法触觉回馈设备
Embossed	盲文打印机
Handheld	便携设备
Print（常用）	打印用纸或打印预览视图
Projection	各种投影设备
Screen（常用）	电脑显示器
Speech	语音或音频合成器
Tv	电视机类型设备
Tty	使用固定密度字母栅格的媒介，比如电传打字机和终端

关键字

关键字将媒体类型或多个媒体特性连接到一起作为媒体查询的条件
1. and：可以将多个媒体特性连接到一起，相当于“且”
2. not：排除某个媒体类型，相当于“非”，可以省略
3. only：指定某个特定的媒体类型，可以省略

媒体特性

每种媒体类型都具有各自不同的特性，根据不同媒体类型的媒体特性设置不同的展示风格

值	解释说明
width	定义输出设备中页面可见区域的宽度
min-width	定义输出设备中页面最小可见区域宽度（包含等于）
max-width	定义输出设备中页面最大可见区域宽度（包含等于）

案例：屏幕尺寸改变屏幕背景颜色

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
    @media screen and (max-width: 639px) {
        body {
            background-color: pink;
        }
    }

    @media screen and (min-width: 640px) and (max-width: 799px) {
        body {
            background-color: skyblue;
        }
    }

    @media screen and (min-width: 800px) {
        body {
            background-color: tomato;
        }
    }
</style>
</head>

媒体查询+rem实现元素动态大小变化

媒体查询+rem：可以实现不同的设备宽度，实现页面元素大小的动态变化

案例：屏幕尺寸改变字体大小

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
    /* 屏幕尺寸小于639px时，html字体大小为50px */
    @media screen and (max-width: 639px) {
      html {
        font-size: 50px;
      }
    }

    /* 屏幕尺寸大于640px时，html字体大小为100px */
    @media screen and (min-width: 640px) {
      html {
        font-size: 100px;
      }
    }

    div {
        height: 1rem;
        font-size: .7rem;
        color: #fff;
        background-color: skyblue;
        text-align: center;
        line-height: 1rem;
    }
</style>
</head>

<body>
    <div>主页</div>
</body>

</html>

引入资源

使用link标签引入

当样式比较繁多的时候，我们可以针对不同的媒体使用不同的stylesheets（样式表）
原理：直接在link中判断设备的尺寸，然后引入不同的css文件
建议：媒体查询最好的方法是从小到大
引入资源就是：针对于不同的屏幕尺寸，调用不同的css文件

演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!-- 建议：媒体查询最好的方法是从小到大
    引入资源就是：针对于不同的屏幕尺寸，调用不同的css文件 -->
    <link rel="stylesheet" media="screen and (min-width: 300px)" href="style300.css">
    <link rel="stylesheet" media="screen and (min-width: 800px)" href="style800.css">
</head>

<body>
    <div>1</div>
    <div>2</div>
</body>
</html>

/* style300.css文件 */
div {
    width: 100%;
    height: 100px;
}
div:nth-child(1) {
    background-color: pink;
}
div:nth-child(2) {
    background-color: skyblue;
}

/* style800.css文件 */
div {
    float: left;
    width: 50%;
    height: 100px;
}
div:nth-child(1) {
    background-color: pink;
}
div:nth-child(2) {
    background-color: skyblue;
}

语法规范：<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="style.css">

使用@import引入

使用方法：

@import "printstyle.css" print;
/* 只在媒体为 print 时导入 "printstyle.css" 样式表 */

@import "mobstyle.css" screen and (max-width: 768px);
/* 只在媒体为 screen 且视口最大宽度 768 像素时导入 "mobstyle.css" 样式表 */

使用@import的缺点
1. 加载顺序问题：在 a.css 中使用 import 引用 b.css，只有当使用当使用 import 命令的宿主 css 文件 a.css 被下载、解析之后，浏览器才会知道还有另外一个 b.css 需要下载
2. 兼容性问题：@import只有在 IE5 以上的才能识别，而 link 标签无此问题
3. 当使用JS控制DOM去改变样式的时候，只能使用link标签，因为@import不是DOM可以控制的
从性能优化的角度来讲，尽量要避免使用 @import