响应式web布局

通过不同的媒体类型和条件定义样式表规则,媒体查询让CSS可以更精确作用于不同的媒体类型和同一媒体的不同条件。媒体查询的大部分媒体特性都接受min和max用于表达”大于或等于”和”小与或等于”。如:width会有min-width和max-width媒体查询可以被用在CSS中的@media和@import规则上,也可以被用在HTML和XML中。通过这个标签属性,我们可以很方便的在不同的设备下实现丰富的界面,特别是移动设备,将会运用更加的广泛。

 

媒体查询能够获取的值如下:

•设备的宽和高device-width,device-heigth显示屏幕/触觉设备。
•渲染窗口的宽和高width,heigth显示屏幕/触觉设备。
•设备的手持方向,横向还是竖向orientation(portrait|lanscape)和打印机等。
•画面比例aspect-ratio点阵打印机等。
•设备比例device-aspect-ratio-点阵打印机等。
•对象颜色或颜色列表color,color-index显示屏幕。
•设备的分辨率resolution。
 

在CSS3中的Media Queries模块中支持对外部样式表的引用, 使用方法类型如下代码:

 @import url(color.css) screen and (min-width: 1000px);             

或:

<link rel="stylesheet" type="text/css" media="only screen and (max-width: 480px),only screen and (max-device-width: 480px)" href="link.css" rel="external nofollow" />   /*使用link导入外部css文件*/

简写:

<link rel="stylesheet" type="text/css" media="screen and (max-width: 480px)  href="link.css" />

   上面使用中only可省略,限定于计算机显示器,第一个条件max-width是指渲染界面最大宽度,第二个条件max-device-width是指设备最大宽度。

在样式表中内嵌@media的代码示例如下所示:

 @media (min-device-width:1024px) and (max-width:989px), screen and (max-device-width:480px), (max-device-width:480px) and (orientation:landscape), (min-device-width:480px) and (max-device-width:1024px) and (orientation:portrait) { 样式代码 }

简写:

@media screen and (max-width:640px)  { 样式代码 }

 在上面的示例代码中,设置了电脑显示器分辨率(宽度)大于或等于1024px(并且最大可见宽度为989px);屏宽在480px及其以下手持设备;屏宽在480px以及横向(即480尺寸平行于地面)放置的手持设备;屏宽大于或等于480px小于1024px以及垂直放置设备的css样式。从上面的例子可以看出,字符间以空格相连,选取条件包含在小括号内,样式代码为兼容设置的样式表,包含在中括号里面。only(限定某种设备,可省略),and(逻辑与),not(排除某种设备)为逻辑关键字,多种设备用逗号分隔,这一点继承了css基本语法。

 

可用的设备类型

   在CSS中嵌入“@media”的方式, 开头必须书写“@media”,然后指定设备类型(上例使用screen代表电脑显示器)。CSS中定义了10种设备类型

可以指定的值

设置类型

all

所有设备

braille

盲文,即盲人用点字法触觉回馈设备

embossed

盲文打印机

handheld

手持的便携设备

print

文档打印用纸或打印预览视图模式

projection

各种投影设备

screen

彩色电脑显示器屏幕

speech

语言和音频合成器

tty

固定字母间距的网格的媒体,比如电传打字机和终端

tv

电视机类型的设备

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。