移动时代是任何网页设计师和开发者不可忽略的一个时代,现在我设计的页面有时会在电脑大屏幕上或者移动小屏幕上显示。如何让同一个网站同时适应完全不同尺寸的屏幕,CSS3完美地解决了这些问题。在CSS2.1版本时候,我们曾经为网站设计不同的CSS样式文件,如打印样式表文件,手机样式文件,电脑样式文件等等,css3提出的MediaQueries解决了这些问题。
CSS3的MediaQueries可以帮助设计师获取以下数据:
1.浏览器的窗口的宽度和高度,
2.设备的宽和高;
3.设备的手持方面,横向还是竖向;
4.分辨率;
到目前为止,MediaQueries模块得到了Firefox浏览器、Safari浏览器、Chrome浏览器以及Opera浏览器的支持。
MediaQueries的使用方法:
@media设备类型and(设备特性){样式代码}
在代码的开头必须要写"@media",然后制定设备类型。css中定义了
设备特性的书写放手与样式的书写方式很相似,分为两个部分,当中有冒号分割,冒号前书写设备的某种特性,冒号后书写该特性的具体值
对于这13种设备特性的说明如下表:
使用and关键字来指定当某种设备类型的某种特性的值满足某个条件时所使用的样式,例如:
@mediascreenand(max-width:639px;)
CSS3的MediaQueries可以帮助设计师获取以下数据:
1.浏览器的窗口的宽度和高度,
2.设备的宽和高;
3.设备的手持方面,横向还是竖向;
4.分辨率;
到目前为止,MediaQueries模块得到了Firefox浏览器、Safari浏览器、Chrome浏览器以及Opera浏览器的支持。
MediaQueries的使用方法:
@media设备类型and(设备特性){样式代码}
在代码的开头必须要写"@media",然后制定设备类型。css中定义了
Media Types 媒体类型 | CSS Version 版本 | Compatibility 兼容性 | Description 简介 |
---|---|---|---|
all | CSS2 | 所有浏览器 | 用于所有媒体设备类型 |
aural | CSS2 | Opera | 用于语音和音乐合成器 |
braille | CSS2 | Opera | 用于触觉反馈设备 |
handheld | CSS2 | Chrome,Safari,Opera | 用于小型或手持设备 |
CSS2 | 所有浏览器 | 用于打印机 | |
projection | CSS2 | Opera | 用于投影图像,如幻灯片 |
screen | CSS2 | 所有浏览器 | 用于计算机显示器 |
tty | CSS2 | Opera | 用于使用固定间距字符格的设备。如电传打字机和终端 |
tv | CSS2 | Opera | 用于电视类设备 |
embossed | CSS2 | Opera | 用于凸点字符(盲文)印刷设备 |
设备特性的书写放手与样式的书写方式很相似,分为两个部分,当中有冒号分割,冒号前书写设备的某种特性,冒号后书写该特性的具体值
对于这13种设备特性的说明如下表:
特性 | 可指定的值 | 是否允许使用min/max前缀 | 特性说明 |
width | 带单位的长度数值 | 允许 | 浏览器窗口的宽度 |
height | 带单位的长度数值 | 允许 | 浏览器窗口的高度 |
device-width | 带单位的长度数值 | 允许 | 设备屏幕分辨率的宽度值 |
device-height | 带单位的长度数值 | 允许 | 设备屏幕分辨率的高度值 |
orientation | 只能指定两个值:portrait或landscape | 不允许 | 浏览器窗口的方向是纵向还是横向,当窗口的高度值大于等于高度值时,该特性值为portrait, |
aspect-ratio | 比例值,例如:16/9 | 允许 | 浏览器窗口的纵横比,比例值为浏览器窗口的宽度值/高度值 |
device-aspect-ratio | 比例值,例如:16/9 | 允许 | 设备屏幕分辨率的纵横比,比例值为设备屏幕分辨率的宽度值/高度值 |
color | 整数值 | 允许 | 设备使用多少位的颜色值,如果不是彩色设备,该值为0 |
color-index | 整数值 | 允许 | 色彩表中的色彩数 |
monochrome | 整数值 | 允许 | 单色帧缓冲器中每像素的字节数 |
resolution | 分辨率值,譬如300dpi | 允许 | 设备的分辨率 |
scan | 只能指定两个值:progressive或interlace | 不允许 | 电视机类型设备的扫描方式,progressive表示逐行扫描,interlace表示隔行扫描 |
grid | 只能指定两个值:0或1 | 不允许 | 设备是基于栅格还是基于位图。基于栅格时该值为1,否则该值为0 |
使用and关键字来指定当某种设备类型的某种特性的值满足某个条件时所使用的样式,例如:
@mediascreenand(max-width:639px;)
设备特性的指定值接受min/max的前缀,用来表示大于或者小于等于的逻辑,以此避免使用<或者>这些字符。
viewport设置适应移动设备屏幕大小
viewport:允许开发者创建一个虚拟窗口并自定义其窗口的大小或缩放功能
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0" />
代码中的content属性可以设置如下6种不同参数
Media Queries如何工作
1、定义当前屏幕可视区域的宽度最大值是600像素
<link href="small.css" rel="stylesheet" media="screen and(max-width:600px)"/>
那么small.css怎样写的呢
@media screen and (max-width:600px) { .demo { background-color:red; } }
2、定义当前屏幕可视区域的宽度长度在600到900像素之间
<link href="small.css" rel="stylesheet" media="screen and(min-width:600px) and(max-width:900px)"/>
@media screen and (min-width:600px) and (max-width:900px) { .demo { background-color: red; } }
3、当移动屏幕处于纵向(portrait)模式下时,应用portrait样式文件,当移动设备处于横向(landscape)模式下,应用landscape样式文件
<link href="protrait.css" rel="stylesheet" media="all and(orientation:portrait)"/> <link href="landscape.css" rel="stylesheet" media="all and(orientation:landscape)"/>
Media Queries语法总结
语法格式如下图所示:
1、使用Media Queries样式模块时都必须以“@media”方式开头
2、media_query表示查询关键定,比如说not only and 等等
- not表示对后面的样式表达式执行取反操作
- only让不支持Media Queries的设备但能读取Media Type类型的浏览器忽略这个样式,对于支持Media Queries的移动设备来说,如果存在only关键字,移动设备的浏览器会忽略only关键字并直接根据页面的表达式应用样式 文件
3、media_type 指定设备类型(也称媒体类型)
4、media_feature定义css中的设备特征
media_type设备类型一览表
media_feature设备特征一览表
大部分设备特征都允许接受min/max的前缀