|
|
|
|
公众号矩阵

6.6.4 Media Queries语法总结

《HTML5移动Web开发指南》第6章移动Web界面样式,本章主要介绍可以在移动Web应用中使用的CSS3新特性,同时还介绍如何使用Media Queries样式模块在传统网站的样式结构下增加移动Web版本网站。本节为Media Queries语法总结。

作者:唐俊开来源:电子工业出版社|2012-04-11 16:18

6.6.4  Media Queries语法总结

Media Queries的语法如下所示:

  1. @media [media_query] media_type and media_feature 

使用Media Queries样式模块时都必须以"@media"方式开头。

media_query表示查询关键字,在这里可以使用not关键字和only关键字。not关键字表示对后面的样式表达式执行取反操作。例如如下代码:

  1. @media not screen and (max-device-width:480px) 
only关键字的作用是,让不支持Media Queries的设备但能读取Media Type类型的浏览器忽略这个样式。例如如下代码:
  1. @media only screen and (max-device-width:480px) 

对于支持Media Queries的移动设备来说,如果存在only关键字,移动设备的Web浏览器会忽略only关键字并直接根据后面的表达式应用样式文件。对于不支持Media Queries的设备但能够读取Media Type类型的Web浏览器,遇到only关键字时会忽略这个样式文件。

虽然media_query这个类型在整个Media Queries语法中并不是必需的类型,但是有时候在实际开发过程中却是非常重要的查询参数类型。

media_type参数的作用是指定设备类型,通常称为媒体类型。实际上在CSS2.1版本时已经定义了该媒体类型。表6-1列出了media_type允许定义的10种设备类型。

表6 1  media_type设备可用类型一览表

media_type

设备类型说明

all

所有设备

aural

听觉设备

braille

点字触觉设备

handled

便携设备,如手机、平板电脑

print

打印预览图等

projection

投影设备

screen

显示器、笔记本、移动端等设备

tty

如打字机或终端等设备

tv

电视机等设备类型

embossed

盲文打印机

media_feature的主要作用是定义CSS中的设备特性,大部分移动设备特性都允许接受min/ max的前缀。例如,min-width表示指定大于等于该值;max-width表示指定小于等于该值。

表6-2显示media_feature设备特性的种类一览表。

表6 2  media_feature设备特性一览表

是否允许

min/max

前缀

   

width

允许

含单位的数值

指定浏览器窗口的宽度大小,

480像素

height

允许

含单位的数值

指定浏览器窗口的高度大小,

320像素

device-width

允许

含单位的数值

指定移动设备的屏幕分

辨率宽度大小,如480像素

device-height

允许

含单位的数值

指定移动设备的屏幕分

辨率高度大小,如320像素

orientation

不允许

字符串值

指定移动设备浏览器的窗口方向。

只能指定portrait(纵向)和landscape

(横向)两个值

aspect-radio

允许

比例值

指定移动设备浏览器窗口的

纵横比例,如16:9

device-aspect-radio

允许

比例值

指定移动设备屏幕分辨率的

纵横比例,如16:9

color

允许

整数值

指定移动设备使用多少位的颜色值

color-index

允许

整数值

指定色彩表的色彩数

monochrome

允许

整数值

指定单色帧缓冲器中每像素的字节数

resolution

允许

分辨率值

指定移动设备屏幕的分辨率

scan

不允许

字符串值

指定电视机类型设备的扫描方式。

只能指定两种值:progressive

示逐行扫描和interlace表示隔行扫描

grid

不允许

整数值

指定设备是基于栅格还是基于位图。

基于栅格时该值为1,否则为0

到目前为止,Media Queries样式模块在桌面端都得到了大部分现代浏览器的支持。例如IE 9浏览器、Firefox浏览器、Safari浏览器、Chrome浏览器、Opera浏览器。但是IE系列的浏览器中只有***版本才支持该特性,IE8以下的版本不支持Media Queries。

从移动平台来说,基于两大平台Android和iOS的Web浏览器也都得到了良好的支持。同时,黑莓系列手机也支持Media Queries特性。

【责任编辑:book TEL:(010)68476606】

回书目   上一节   下一节
点赞 0
分享:
大家都在看
猜你喜欢

订阅专栏+更多

16招轻松掌握PPT技巧

16招轻松掌握PPT技巧

GET职场加薪技能
共16章 | 晒书包

287人订阅学习

20个局域网建设改造案例

20个局域网建设改造案例

网络搭建技巧
共20章 | 捷哥CCIE

645人订阅学习

WOT2019全球人工智能技术峰会

WOT2019全球人工智能技术峰会

通用技术、应用领域、企业赋能三大章节,13大技术专场,60+国内外一线人工智能精英大咖站台,分享人工智能的平台工具、算法模型、语音视觉等技术主题,助力人工智能落地。
共50章 | WOT峰会

0人订阅学习

读 书 +更多

大师品软件——软件之痛与应对之道

这并不是一本传统的技术专著,因为它并没有包含一行代码,而更像是一部技术评论。作者通过幽默诙谐而又不失辛辣的语言,从程序员、用户等多...

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊

51CTO服务号

51CTO播客