今天,北京又从卫星地图上消失了, 奥巴马愤怒的把绝密报告摔在桌上, “到底是什么先进武器,这么大的城市说不见就不见啦? 北京雾霾究竟有多可怕? 连你们都不敢去?” 钢铁侠、绿巨人、蝙蝠侠等羞惭地低下头。忽然,金刚狼提议: “擎天柱可以!他不需呼吸!” 擎天柱默默地说:“我尼玛的限号!

Media Screen

<!doctype html>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<title>Media Query Demos</title>
<style type=”text/css”>
.wrapper {
border: solid 1px #666;
padding: 10px;
margin: 20px;
}
.viewing-area span {
color: #666;
display: none;
}
/* max-width */
@media screen and (max-width: 600px) {
.one {
background: #f30;
}
span.lt600 {
display: inline-block;
}
}
/* min-width */
@media screen and (min-width: 900px) {
.two {
background: #f30;
}
span.gt900 {
display: inline-block;
}
}
/* min-width & max-width */
@media screen and (min-width: 600px) and (max-width: 900px) {
.three {
background: #f30;
}
span.bt600-900 {
display: inline-block;
}
}
/* max device width */
@media screen and (max-device-width: 480px) {
.iphone {
background: #ccc;
}
}
</style>
</head>
<body>
<div class=”wrapper one”>This box will turn to pink if the viewing area is less than 600px</div>
<div class=”wrapper two”>This box will turn to orange if the viewing area is greater than 900px</div>
<div class=”wrapper three”>This box will turn to blue if the viewing area is between 600px and 900px</div>
<div class=”wrapper iphone”>This box will only apply to devices with max-device-width: 480px (ie. iPhone)</div>
<p class=”viewing-area”><strong>Your current viewing area is:</strong>
<span class=”lt600″>less than 600px</span>
<span class=”bt600-900″>between 600 – 900px</span>
<span class=”gt900″>greater than 900px</span></p>
</body>
</html>