定义css设备类型-Media Queries图表简介及使用方法

2024-07-11 08:29:04

字体：大中小

来源：转载

供稿：网友

移动时代是任何网页设计师和开发者不可忽略的一个时代，现在我设计的页面有时会在电脑大屏幕上或者移动小屏幕上显示。如何让同一个网站同时适应完全不同尺寸的屏幕，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	用于凸点字符（盲文）印刷设备