通过媒体屏幕宽度查看CSS
[英]CSS view by media screen width
问题描述
我有我的CSS文件，看起来像这样：
.topBarBox{
background-color:black;
}
@media screen and (max-width: 900px) {
.topBarBox{
background-color:blue;
}
}
div的背景颜色为黑色，无论屏幕大小如何。 我在这里做错什么了吗？
4 个解决方案
解决方案1
1 2015-12-15 13:03:08
更改您的媒体查询
@media only screen and (max-width : 900px) {
.topBarBox{
background-color:blue;
}
}
解决方案2
1 2015-12-15 13:04:04
您忘记了“ only”关键字。 更改为此：
@media only screen and (max-width: 900px) {
.topBarBox {
background-color:blue;
}
}
解决方案3
1 2015-12-15 13:18:11
确保您的HTML页面在<head>部分中包含以下行：
<meta name="viewport" content="width=device-width, initial-scale=1">
另外，在<html>部分上方的<!DOCTYPE html> 。
这应该适用于：
.topBarBox{
background-color:black;
}
@media (max-width: 900px) {
.topBarBox{
background-color:blue;
}
}
另外，请确保html或body都没有固定的宽度，例如：
body, html {
width: 1000px;
}
如果有这样的CSS样式，则将其删除或更改为：
body, html {
width: 100%;
}
解决方案4
1 2015-12-15 13:33:31
这对我来说很好：
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
.topBarBox {
background-color: black;
}
@media screen and (max-width: 900px) {
.topBarBox {
background-color: blue;
}
}
</style>
</head>
<body>
<div class="topBarBox">
Hello
</div>
</body>
</html>
也许您在CSS的其他地方有一些样式可以覆盖这些样式？
您可以尝试使用web-inspector ，这应该使事情变得清楚。
例：
.topBarBox { background-color: black; } @media screen and (max-width: 900px) { .topBarBox { background-color: blue; } }
<div class="topBarBox"> Hello </div>
屏幕宽度和父div宽度CSS的OR条件。 基于父元素宽度的媒体查询
[英]OR condition in css for screen width and parent div width, . Media query based on parent element width
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.