您的位置:首页 > 其它

响应式开发从原理到实战案例(四):媒体查询语法介绍

2016-11-09 18:37 525 查看
什么是媒体查询

是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)

 
 ~~~~~~~~~~~~~~~~~下一节《使用媒体查询改进响应式页面》~~~~~~~~~~~~~~~~~
 
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
相关文章推荐