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
扫一扫
1707
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
