响应式开发从原理到实战案例（四）：媒体查询语法介绍

什么是媒体查询

是H5的新特性，为了移动端的使用而新增的特性，使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。它就是为响应式而来的！

语法格式

<media_query>：[only| not]? <media_type> [and<expression>]* | <expression>[and <expression>]*

<expression>：'('<media_feature>[:<value>]?')'

 语法符号说明

1.    < >表示有更多内容或形式

2.    []其中的一个，这个和和正则表达式是一样的

3.    ?表示前面的表达式可有可无

4.    *表示前面的表达式可以出现任意次数

5.    |表示或者的意思，选择其中的一个

几个逻辑符号

only：指定某种媒体类型，默认为only（不常用）

例如：@media only print，只能在打印机上，感觉only有点多余，可以省略

@media print 是同样的意思，only只起到强调作用。

not：排除某种媒体类型（不常用）

例如：@media not printand(width:800px)，表示不再打印机上。

注意：not和 only都只作用于媒体类型，不作用于后面的媒体特征

and：连接多个媒体特征（常用）

语法的使用

//用在样式上（常用）

@media screen and(width:800px){ … }

//导入样式，屏幕为800px时导入（不常用，了解即可）

@import url(example.css) screen and(width:800px);

//引用样式文件（不常用，了解即可）

<link media="screen and(width:800px)" rel="stylesheet" href="example.css"/>

//定义样式 （不常用，了解即可）

<styletype="text/css" media="(width:800px)" >

//引用样式文件（不常用，了解即可）

<?xml-stylesheet media="screen and(width:800px)" rel="stylesheet" href="example.css"?>

<media_type> 媒体类型

值	描述
all	用于所有设备
aural	已废弃。用于语音和声音合成器
braille	已废弃。应用于盲文触摸式反馈设备
embossed	已废弃。用于打印的盲人印刷设备
handheld	已废弃。用于掌上设备或更小的装置，如PDA和小型电话
print	用于打印机和打印预览
projection	已废弃。用于投影设备
screen	用于电脑屏幕，平板电脑，智能手机等。
speech	应用于屏幕阅读器等发声设备
tty	已废弃。用于固定的字符网格，如电报、终端设备和对字符有限制的便携设备
tv	已废弃。用于电视和网络电视

 

<media_feature>媒体特性

媒体特性	取值	接受min/max	描述
width	<length>	yes	定义输出设备中的页面可见区域宽度
height	<length>	yes	定义输出设备中的页面可见区域高度
device-width	<length>	yes	定义输出设备的屏幕可见宽度
device-height	<length>	yes	定义输出设备的屏幕可见高度
orientation	portrait | landscape	no	portrait代表竖屏，landscape代表横屏。
aspect-ratio	<ratio>	yes	定义'width'与'height'的比率
device-aspect-ratio	<ratio>	yes	定义'device-width'与'device-height'的比率。如常见的显示器比率：4/3, 16/9, 16/10
color	<integer>	yes	定义每一组输出设备的彩色原件个数。如果不是彩色设备，则值等于0
color-index	<integer>	yes	定义在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表，则值等于0
monochrome	<integer>	yes	定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备，则值等于0
resolution	<resolution>	yes	定义设备的分辨率。如：96dpi, 300dpi, 118dpcm
scan	progressive | interlace	no	定义电视类设备的扫描工序
grid	<integer>	no	用来查询输出设备是否使用栅格或点阵。只有1和0才是有效值，1代表是，0代表否

 

比较常见的是width，可以加前缀max和min表示一个范围

max-width：表示最大宽度，满足条件 屏幕的宽度≤max-width

min-width：表示最小宽度，满足条件  屏幕的宽度≥min-width

例如屏幕的范围表示：

• 窄屏： @media (max-width:480px)
• 中屏：@media (min-width: 768px)and (max-width: 979px)
• 宽屏：@media (max-width: 979px)

 

 ~~~~~~~~~~~~~~~~~下一节《使用媒体查询改进响应式页面》~~~~~~~~~~~~~~~~~