十Media Queries相关样式

Posted llmjiayou7

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了十Media Queries相关样式相关的知识,希望对你有一定的参考价值。

一、根据浏览器的窗口大小来选择使用不同的样式

在css中,与媒体相关的样式定义是从css2开始的。css2中定义了各种媒体类型,包括显示器、便携设备、电视机等。

css3中加入了Media Queries模块,该模块允许添加媒体查询(media querise)表达式,来指定媒体类型,然后根据媒体类型来选择应该使用的样式。

二、在iphone中的显示

即使在页面中已经写好了页面在小尺寸窗口中运行时的样式,iphone中的safari浏览器也不会使用这个样式,而是选择窗口宽度为980px时所使用的样式。在这种情况下,可以利用<meta>标签在页面中指定safari浏览器在处理本页面时按照多少像素的窗口宽度来进行,使用方法如下:

<meta name="viewport" content="width=600px" />  //加入这段代码后,Safari浏览器将窗口宽度按照600px来处理

三、Media Queries的使用方法

@madia 设备类型 and (设备特征){样式代码}

可以指定的值和该值所代表的设备类型:

all:所有设备

screen:电脑显示器

print:打印用纸或打印预览视图

handheld:便携设备

tv:电视机类型的设备

speech:语音和音频合成器

braille:盲人用点子法触觉回馈设备

embossed:盲文打印机

projection:各种投影设备

tty:使用固定密度字母栅格的媒介,比如电传打字机和终端

 

13种设备特性的说明

width:浏览器窗口的宽度

height:浏览器窗口的高度

device-width:设备屏幕分辨率的宽度值

device-height:设备屏幕分辨率的宽度值

orientation:不允许使用min/max前缀,浏览器窗口的方向是纵向还是横向。当窗口的高度值大于等于宽度值时,该特性值为portait,否则为landscape。

aspect-ratio:浏览器窗口的纵横比,比例值为浏览器窗口的宽度值/高度值

device-aspect-ratio:屏幕分辨率的纵横比

color:设备使用多少位的颜色值,如果不是彩色设备,值为0

color-index:色彩表中的色彩数

monochrome:单色帧缓冲器中每像素的字节数

resolution:设备的分辨率

scan:电视机类型设备的扫描方式。progressive表示逐行扫描,interlace表示隔行扫描

grid:设别是基于栅格还是基于位图。基于栅格睡值为1,否则为0。

 

关键字:

and:指定当某种设备类型的某种特性的值满足某个条件时所使用的样式。

only:

not:表示对后面的表达式执行取反操作。

以上是关于十Media Queries相关样式的主要内容,如果未能解决你的问题,请参考以下文章

实践 HTML5 的 CSS3 Media Queries

基于 CSS3 Media Queries 的 HTML5 应用

Media Queries——媒体类型

学习——伪类+js实现css3 media queries跨界准确判断

Media Queries 详解

CSS3: Media Queries