响应式开发从原理到实战案例(四):媒体查询语法介绍
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> 媒体类型
<media_feature>媒体特性
比较常见的是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)
~~~~~~~~~~~~~~~~~下一节《使用媒体查询改进响应式页面》~~~~~~~~~~~~~~~~~
是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)
~~~~~~~~~~~~~~~~~下一节《使用媒体查询改进响应式页面》~~~~~~~~~~~~~~~~~
相关文章推荐
- 响应式开发从原理到实战案例(五):使用媒体查询改进响应式页面
- 响应式开发从原理到实战案例(六):bootstrap框架介绍
- 响应式开发从原理到实战案例(七):使用bootstrap V2.3.2实现响应式页面
- 响应式开发从原理到实战案例(三):静态页面转响应式页面
- 响应式开发从原理到实战案例(九):响应式改版完整案例-静态页面制作
- 响应式开发从原理到实战案例(十):响应式改版完整案例-头部列表
- 响应式开发从原理到实战案例(十一):响应式改版完整案例-头部菜单
- 响应式开发从原理到实战案例(二):制作没有响应式的静态页面
- 响应式开发从原理到实战案例(十五):响应式改版完整案例-完结
- 响应式开发从原理到实战案例(十四):响应式改版完整案例-图片处理
- 响应式开发从原理到实战案例(八):使用bootstrap V3.3.7实现响应式页面
- 响应式开发从原理到实战案例(一):响应式基本概述
- 响应式开发从原理到实战案例(十三):响应式改版完整案例-页脚
- 响应式开发从原理到实战案例(十二):响应式改版完整案例-文章列表
- Java基础语法day01(Java开发环境搭建、HelloWorld案例、基础知识介绍)
- 第93讲(HelloActor整体介绍):Akka第一个案例动手实战开发消息实体类
- 用媒体查询实现web响应式开发小记
- 前端开发响应式设计之媒体查询(bootstrap)
- 《Microsoft Office SharePoint Server 2007案例实战开发》之对象介绍
- 响应式开发中的媒体查询