定义css设备类型-Media Queries

移动时代是任何网页设计师和开发者不可忽略的一个时代，现在我设计的页面有时会在电脑大屏幕上或者移动小屏幕上显示。如何让同一个网站同时适应完全不同尺寸的屏幕，CSS3完美地解决了这些问题。在CSS2.1版本时候，我们曾经为网站设计不同的CSS样式文件，如打印样式表文件，手机样式文件，电脑样式文件等等，css3提出的Media Queries 解决了这些问题。

CSS3的Media Queries 可以帮助设计师获取以下数据：

1. 浏览器的窗口的宽度和高度，

2.设备的宽和高；

3. 设备的手持方面，横向还是竖向；

4. 分辨率；

到目前为止，Media Queries 模块得到了Firefox浏览器、Safari浏览器、Chrome浏览器以及Opera浏览器的支持。

Media Queries的使用方法：

@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关键字来指定当某种设备类型的某种特性的值满足某个条件时所使用的样式，例如：

@media screen and(max-width:639px;)

设备特性的指定值接受min/max的前缀，用来表示大于或者小于等于的逻辑，以此避免使用< 或者 >这些字符。

定义css设备类型-Media Queries相关推荐

定义css设备类型-Media Queries图表简介及使用方法
移动时代是任何网页设计师和开发者不可忽略的一个时代,现在我设计的页面有时会在电脑大屏幕上或者移动小屏幕上显示.如何让同一个网站同时适应完全不同尺寸的屏幕,CSS3完美地解决了这些问题.在CSS2.1版 ...
CSS3 Media Queries：移动 Web 的完美开端
移动时代,是任何 Web 设计与开发者都不能忽视的一个时代,总有一天,你设计的东西将被显示在两种屏幕上,桌面大屏幕和移动小屏幕,如何让同一个网站同时适应完全不同的两种尺寸的屏幕,这是一个很久以来都没有 ...
css3 media queries
CSS3 Media Queries模板作者:大漠日期:2012-04-04 点击:3183  最早在<CSS3 Media Queries>一文中初探了CSS3的媒体类型和媒体特性 ...
CSS：媒体查询 CSS3 Media Queries
定义和使用使用 @media 查询,你可以针对不同的媒体类型定义不同的样式. @media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的. ...
【原】YUI压缩与CSS media queries下的bug
大概是上个月,使用YUI压缩一个css文件后,发现只要是被压缩后的css文件有部分根本无法工作,一直都不知啥问题引起的,让我感到头疼. 今天发现了只要是在媒体查询中的样式无法起作用,于是才开始怀疑是m ...
CSS之Responsive设计和CSS3 Media Queries的结合
随着高科技的发展,现在我们浏览网页不在局限于PC机上了,用户可使用上网的设备是越来越多的品种:手机.小笔记本.iPad.Playbook,以及PC机,而且PC机的显展大小各不一致.这样一来不同的屏幕分 ...
CSS之不使用Media Queries的自适应CSS
虽然标题说不用Media Queries,但我还是要在开头讲清楚,本文并不是要大家丢掉Media Queries,也不是要抨击Media Queries.Media Queries实际上非常有用,我在 ...
html调用媒体图标,关于CSS 媒体查询（media queries）
传统的CSS只支持数量有限的设备显示规则,如:all.screen.print.handheld.television和projector.这些对于设备的尺寸.方向或分辨率没有任何的定论.CSS2.1 ...
CSS media queries
最近在做一些页面打印时的特殊处理接触到了media queries,想系统学习一下,在MOZILLA DEVELOPER NETWORK看到一篇文章讲的很不错,结合自己的使用总结一下. CSS2/me ...

定义css设备类型-Media Queries

定义css设备类型-Media Queries相关推荐

最新文章

热门文章