[英]Media Query: Doesn't Change Style when i resize the browser
I have this code . 我有这个代码。 When i resize the browser to min-width: 480px
it doesn't change the background color to blue and width to 100px 当我将浏览器调整为min-width: 480px
它不会将背景色更改为蓝色,而将宽度更改为100px
this is my code so far: 到目前为止,这是我的代码:
@media screen and (min-width: 480px) { .boxcontainer { background-color: blue; width: 100px; } } .boxcontainer{ width: 1300px; background-color: green; height: 200px; }
<div class="boxcontainer"> </div>
Thank you 谢谢
Switch the order of the CSS rule, Change your CSS into 切换CSS规则的顺序,将CSS更改为
.boxcontainer {
width: 1300px;
background-color: green;
height: 200px;
}
@media screen and (min-width: 480px) {
.boxcontainer {
background-color: blue;
width: 100px;
}
}
As in this JSFiddle example. 如在此JSFiddle示例中。 the background is blue as long as the width is not less than 480px
, otherwise it turns green. 只要宽度不小于480px
,背景为蓝色,否则变为绿色。
IF by any chance you meant to do the opposite, because .boxcontainer{width:1300px}
makes me think you want that , then just change the media query break point to @media screen and (max-width: 480px)
instead of @media screen and (min-width: 480px)
. 如果碰巧您打算做相反的事情, 因为.boxcontainer{width:1300px}
让我认为您想.boxcontainer{width:1300px}
,然后只需将媒体查询断点更改为@media screen and (max-width: 480px)
而不是@media screen and (min-width: 480px)
。
You can see the second option in this JSFiddle 您可以在此JSFiddle中看到第二个选项
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.