<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Document</title>
<style type="text/css">
@media screen and (max-width:480px){
.wrap img {
width: 100%
}
.logo {
width: 100%
height: 100px
background: red
}
}
.logo {
width: 100%
height: 100px
}
</style>
</head>
<body>
<div class="logo"></div>
</body>
</html>
不知道是不是应为没添加这句：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
media是规定媒介类型的，默认是screen，此外还有print， 输出到打印机；
projection，提交到投影机；
aural，扬声器；
braille，提交到凸字触觉感知设备；
tty，电传打字机 (使用固定的字体)；
tv，电视机；
all，所有输出设备
--
以上是传统的说明，实际上除了规定这些之外，你还可以用@media来设定不同分辨率下的不同样式形式。
比如，你设定了页面的max-width（最大宽度）为960px
在传统的用法中，不管它在什么样的分辨率下，都会这样表达。
但是你现在完全可以用media来规定，当浏览宽度大于1000px的时候，max-width为960px
而在手机，比如IP4s上，可以让其max-width为480px之类的。
