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 使用固定密度字母栅格的媒介，比如电传打字机和终端
关键字
- 关键字将媒体类型或多个媒体特性连接到一起作为媒体查询的条件
and：可以将多个媒体特性连接到一起，相当于“且”not：排除某个媒体类型，相当于“非”，可以省略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的缺点- 加载顺序问题：在 a.css 中使用 import 引用 b.css，只有当使用当使用 import 命令的宿主 css 文件 a.css 被下载、解析之后，浏览器才会知道还有另外一个 b.css 需要下载
- 兼容性问题：
@import只有在 IE5 以上的才能识别，而 link 标签无此问题 - 当使用JS控制DOM去改变样式的时候，只能使用link标签，因为@import不是DOM可以控制的
-
从性能优化的角度来讲，尽量要避免使用 @import
