|
|
CSS3完美地解决了让同一个网站同时适应完全不同尺寸的屏幕这些问题;css3提出的MediaQueries解决了为网站设计不同的CSS样式文件，如打印样式表文件，手机样式文件，电脑样式文件这些问题,感兴趣的朋友可以了解下哦
移动时代是任何网页设计师和开发者不可忽略的一个时代，现在我设计的页面有时会在电脑大屏幕上或者移动小屏幕上显示。如何让同一个网站同时适应完全不同尺寸的屏幕，CSS3完美地解决了这些问题。在CSS2.1版本时候，我们曾经为网站设计不同的CSS样式文件，如打印样式表文件，手机样式文件，电脑样式文件等等，css3提出的MediaQueries解决了这些问题。
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 |
用于小型或手持设备 |
| print |
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的前缀，用来表示大于或者小于等于的逻辑，以此避免使用<或者>这些字符。 |
|
发表于 2013-1-21 10:00:00
