定义css设备类型-Media Queries

网友投稿 1054 2022-11-22

定义css设备类型-Media Queries

定义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的前缀,用来表示大于或者小于等于的逻辑,以此避免使用< 或者 >这些字符。

版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:三种方法实现弹出框边框半透明和圆角的效果
下一篇:前端性能优化
相关文章

 发表评论

暂时没有评论,来抢沙发吧~