use*_*174 1 css css3 media-queries responsive-design
在index.html中添加了这一行:
<link href="css/style.css" media="all "rel="stylesheet" type="text/css" />
这是我的媒体查询CSS:
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
#mapArea .white span {
width: 100px;
}
}
但是当我在浏览器中检查它时,不要工作.我的问题是什么？我该如何解决？
(测试了所有现代浏览器)
Ada*_*son 14
您正在查询device-width,如果您在笔记本电脑或台式机上不会触发这些查询.将这些更改为min-width,您应该看到查询工作.
此外,请确保你有一个viewport,即meta标签<meta name="viewport" content="width=device-width,initial-scale=1.0">在<head>你的HTML中.
@media only screen有不同的定义@media screen.
关键字"仅"也可用于隐藏旧用户代理的样式表.用户代理必须处理以"仅"开头的媒体查询,就好像"仅"关键字不存在一样.
资料来源:http://www.w3.org/TR/css3-mediaqueries/
也许你可以尝试改变这个:
@media screen and (min-width : 320px) and (max-width : 480px) {
.white span {
width: 100px;
}
}