Media Queries媒体查询相关样式

Media Queries相关样式

1.Media Queries 有两种使用方法

1.1用@media 来判断使用者之屏幕宽度，选择载入哪一段CSS样式。

1.2在HTML 的<link> 载入的地方，用media 属性判断使用者的屏幕宽度，选择载入哪一个CSS样式表。

 

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

/*窗口宽度在1000px以上*/

@media screen and (min-width:1000px){

/*三栏显示*/

}

/*窗口宽度在640px以上，999px以下*/

@media screen and (min-width:640px) and (max-width:999px) {

/*2栏显示*/

}

/*窗口宽度在639px以下*/

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

/*一栏显示*/

}

3.在iphone中显示

Iphone中使用的safari浏览器在进行页面显示时是将窗口宽度作为980px进行显示的。因为大多数网页是按照宽度为800px左右的标准来制作的，所以safari这样就可以正常显示大多数网页了。

可以利用<meta>标签在页面中指定safari处理本页时按照多少像素来显示

//在页面中准备好各个尺寸的窗口样式，然后在标签中写入指定的窗口宽度

<meta name=”viewport” content=”width=600px” />

4.Media queries的使用方法

@media 设备类型 and (设备特性) {样式代码}

3.1 css定义了10种设备类型

 

all  (所有设备)

screen (电脑显示器)

print (打印用印或打印机预览图)

handheld(便携设备)

tv(电视机类型的设备)

speech(语音和音频合成器)

braille(盲人用点字法触觉回馈设备)

embossed(盲文打印机)

projection(各种投影设备)

tty(固定密度字母栅格的媒介，比如电传打字机和终端)

 

3.2设备特性有13种 (略)

@media screen and (max-device-width: 480px) {  

    // 如果使用者之装置宽度 <= 480px，将会再载入这裡的 CSS。 用于判断手机最大宽度，不是浏览器视窗 

}

 

3.3 使用多条语句来将同一个样式用于不同设备类型

@media handheld and (min-width:360px), screen and (min-width:480px) {样式}

3.4 在表达式中加上not 关键字或only关键字，not表示对后面的表达式取反操作

@media not handheld and (color) {样式}

only关键字是让那些不支持Media queries但能够读取media type的设备的浏览器忽略这个样式（如IE8只支持@media screen, 而@media only screen将会忽略）

@media only screen and (color) {样式代码}

3.5 Media queries支持对外部样式表的引用

@import url(color.css) screen and (min-width:1000px);

<link rel=”stylesheet” type=”text/css” media=”screen and (min-width:1000px)” href=”style.css” />

<link rel="stylesheet" type="text/css" href="b.css" media="screen and (min-width: 768px) and (max-width: 979px)">  

<link rel="stylesheet" type="text/css" href="c.css" media="screen and (min-width: 1200px)">  

<link rel="stylesheet" type="text/css" href="d.css" media="screen and (max-device-width: 480px)">

 

4. Viewport

如果网页没有做Responsive Web Design 的话，手机的浏览器会自动假装解析度变很大，会让网页完整显示。 但是，这就让字变得很小，使用者还要去做放大而不能直接阅读。 而这个meta 标签是为了防止这样的情形发生( iphone 据说会有此情形)，让网页显示的宽度就直接是装置的宽度，不会把网页硬塞。 这段只要加在HTML 的<head> 里头即可。

<meta name="viewport" content="width=device-width; initial-scale=1.0" />

 

5. IE8 Hack

有人制作了让不支持Media Queries 的浏览器通过Javascript 的方式也能支持。 而目前这个似乎还是有点小问题，实际能不能使用请直接至该网站查询：

css3-mediaqueries-js – a library that aims to add media query support to non-supporting browsers