CSS3 @media

CSS3 @media

---

可视区域的宽度大于960px小于1200px设置body的背景颜色为黄色

1 2 3

@media screen and (min-width:960px) and (max-width:1200px){ body{background:yellow;} }

@media可用于根据一个或多个基于设备类型、具体特点和环境的媒体查询来应用样式。

@media规则由一个或多个媒体查询组成，每个媒体查询包含一个可选的媒体类型和若干媒体特性。多个查询可通过使用逻辑运算符以多种方式组合起来，且对大小写敏感。

@media规则仅当媒体查询计算为真时，即，当指定的媒体类型与正在显示文档的设备的类型匹配并且所有媒体特征表达式计算为真时，才应用相应的样式。

媒体类型

1. all: 所有媒体
2. braille: 盲文触觉设备
3. embossed: 盲文打印机
4. print: 手持设备
5. projection: 打印预览
6. screen: 彩屏设备
7. speech: ‘听觉’类似的媒体类型
8. tty: 不适用像素的设备
9. tv: 电视

Media所有参数

1. width: 浏览器可视宽度。
2. height: 浏览器可视高度。
3. device-width: 设备屏幕的宽度。
4. device-height: 设备屏幕的高度。
5. orientation: 检测设备目前处于横向还是纵向状态。
6. aspect-ratio: 检测浏览器可视宽度和高度的比例。
7. device-aspect-ratio: 检测设备的宽度和高度的比例。
8. color: 检测颜色的位数。
9. color-index: 检查设备颜色索引表中的颜色，他的值不能是负数。
10. monochrome: 检测单色楨缓冲区域中的每个像素的位数。
11. resolution: 检测屏幕或打印机的分辨率。
12. grid: 检测输出的设备是网格的还是位图设备。

关键字

1. and: 用来合并多种媒体类型或参数
2. not: 用来排除某种制定的媒体类型
3. only: 用来定某种特定的媒体类型

常用的几种屏幕宽度设定

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

@media screen and (min-width: 1200px) { // 宽度大于1200px } @media screen and(min-width: 960px) and (max-width: 1199px) { // 宽度大于960px小于1199px } @media screen and(min-width: 768px) and (max-width: 959px) { // 宽度大于768px小于959px } @media screen and(min-width: 480px) and (max-width: 767px) { // 宽度大于480px小于767px } @media screen and (max-width: 479px) { // 宽度小于479px }

原文:大专栏  CSS3 @media