Categories

Friends

COLORFUL

Media Query

Media Type媒体类型

<link href="css/reset.css" rel="stylesheet" type="text/css" media="screen" />"

media 属性值

screen：计算机屏幕（默认）
tty：电传打字机以及类似的使用等宽字符网格的媒介
tv： 电视机类型设备（低分辨率、有限的滚屏能力）
projection：放映机
handheld：手持设备（小屏幕、有限带宽）
print： 打印预览模式/打印页面
braille：盲人点字法反馈设备
aural：语音合成器
all：适用于所有设备

Media Query

<link rel="stylesheet" media="only screen and (max-width: 600px)" href="small.css" />
<link rel="stylesheet" media="(min-device-width: 600px) and (max-device-width: 1000px)" href="small.css" />
<link rel="stylesheet" media="not print and (max-width: 600px)" href="small.css" />
<link rel="stylesheet" media="screen and (max-width: 600px) and (orientation: landscape)" href="small.css" />

同

@media screen and (max-width: 1000px){
    body{
        background: red;
    }
}
@media screen and (max-width: 1000px) and (orientation: landscape){
    body{
        background: yellow;
    }
}
Written on August 20, 2014