【HTML&CSS】CSS媒体查询

CSS Media Queries 简介

• Media Queries，其做用就是容许添加表达式用以肯定媒体的环境状况，以此来应用不一样的样式表，改变页面的布局以精确适应不一样的设备。

CSS Media Queries 使用方式

• 方法1：在 标签的media属性中指明设备类型和尺寸，当符合时引入当前标签中的CSS文件；

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

• 方法2：在CSS代码头部，用@media属性指定设备类型和尺寸，当符合时用当前代码覆盖相关已有样式；

<style>
@media screen  and (min-width: 400px)
{
    p.test {font-family:verdana,sans-serif;font-size:14px;}
}
@media screen,print
{
    p.test {font-weight:bold;}
}
</style>

CSS Media Queries 语法

一、使用 标签：

<link rel="stylesheet" type="text/css" media="media_type1,media_type2 keyword (media_feature expression)" href="mystylesheet1.css">
<link rel="stylesheet" type="text/css" media="media_type3 keyword (media_feature expression)" href="mystylesheet2.css">

二、在CSS代码中使用：

@media media_type1,media_type2 keyword (media_feature expression) {
    CSS-Code;
}

三、两种用法中的media_feature expression具体语法：

基本语法: (media_feature:value)
语法细节：表达式中能够加入keyword，例如：(media_feature:value keyword media_feature:value)或者(keyword media_feature:value)【后一个待考证】；

CSS Media Queries 参数对照表

• media_type（设备类型）: all | aural | braille | handheld | print | projection | screen | tty | tv | embossed

media_type	描述
❤all	用于全部的媒体设备。
aural	用于语音和音频合成器。
braille	用于盲人用点字法触觉回馈设备。
handheld	用于小的手持的设备。
❤print	用于打印机和打印预览。
projection	用于投影设备。
❤screen	用于电脑、平板、手机显示器。
❤speech	应用于屏幕阅读器等发声设备。
tty	用于使用固定密度字母栅格的媒体，好比电传打字机和终端。
tv	用于电视机类型的设备。
embossed	用于分页的盲人用点字法打印机。

注：标记有❤的为经常使用类型。

• keyword（关键字）： not | only | and

keyword	描述
not	not是用来排除掉某些特定的设备的，好比 @media not print（非打印设备）。
only	用来定某种特别的媒体类型。 对于支持Media Queries的移动设备来讲， 若是存在only关键字， 移动设备的Web浏览器会忽略only关键字并直接根据后面的表达式应用样式文件。 对于不支持Media Queries的设备但可以读取Media Type类型的Web浏览器， 遇到only关键字时会忽略这个样式文件。
and	而且

注：not/only用在范围首部表示应用于当前范围的条件,and用在多个范围中间表示范围条件的叠加。

• media_feature（媒体特征）:
  | width | min-width | max-width
  | height | min-height | max-height
  | device-width | min-device-width | max-device-width
  | device-height | min-device-height | max-device-height
  | device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio
  | color | min-color | max-color
  | color-index | min-color-index | max-color-index
  | monochrome | min-monochrome | max-monochrome
  | resolution | min-resolution | max-resolution
  | scan | grid

media_feature	描述
aspect-ratio	定义输出设备中的页面可见区域宽度与高度的比率。
color	定义输出设备每一组彩色原件的个数。若是不是彩色设备，则值等于0。
color-index	定义在输出设备的彩色查询表中的条目数。若是没有使用彩色查询表，则值等于0。
device-aspect-ratio	定义输出设备的屏幕可见宽度与高度的比率。
device-height	定义输出设备的屏幕可见高度。
device-width	定义输出设备的屏幕可见宽度。
grid	用来查询输出设备是否使用栅格或点阵。
height	定义输出设备中的页面可见区域高度。
max-aspect-ratio	定义输出设备的屏幕可见宽度与高度的最大比率。
max-color	定义输出设备每一组彩色原件的最大个数。
max-color-index	定义在输出设备的彩色查询表中的最大条目数。
max-device-aspect-ratio	定义输出设备的屏幕可见宽度与高度的最大比率。
max-device-height	定义输出设备的屏幕可见的最大高度。
max-device-width	定义输出设备的屏幕最大可见宽度。
max-height	定义输出设备中的页面最大可见区域高度。
max-monochrome	定义在一个单色框架缓冲区中每像素包含的最大单色原件个数。
max-resolution	定义设备的最大分辨率。
max-width	定义输出设备中的页面最大可见区域宽度。
min-aspect-ratio	定义输出设备中的页面可见区域宽度与高度的最小比率。
min-color	定义输出设备每一组彩色原件的最小个数。
min-color-index	定义在输出设备的彩色查询表中的最小条目数。
min-device-aspect-ratio	定义输出设备的屏幕可见宽度与高度的最小比率。
min-device-width	定义输出设备的屏幕最小可见宽度。
min-device-height	定义输出设备的屏幕的最小可见高度。
min-height	定义输出设备中的页面最小可见区域高度。
min-monochrome	定义在一个单色框架缓冲区中每像素包含的最小单色原件个数。
min-resolution	定义设备的最小分辨率。
min-width	定义输出设备中的页面最小可见区域宽度。
monochrome	定义在一个单色框架缓冲区中每像素包含的单色原件个数。若是不是单色设备，则值等于0。
orientation	定义输出设备中的页面可见区域高度是否大于或等于宽度。
resolution	定义设备的分辨率。如：96dpi, 300dpi, 118dpcm。
scan	定义电视类设备的扫描工序。
width	定义输出设备中的页面可见区域宽度。

注：(media_feature) value:须要带上单位；

CSS Media Queries 浏览器支持情况

浏览器	第一个支持的版本
Chrome	21
IE	9
Firefox	3.5
Safari	4.0
Opera	9