gpt4 book ai didi

css - 为什么我的@media 查询不起作用?

转载 作者:行者123 更新时间:2023-11-28 01:23:07 26 4
gpt4 key购买 nike

    * {
background-color:grey;
}
body {
margin: 0 ;
}
#container {
height:800px;
display:flex;

text-align:center;

justify-content:flex-start;
flex-direction: column;
}






#container {
width:15%;
}

#container > a {
flex:1;
border-radius:10px;
height:100px;
}

#box-1 {
background-color:green;

flex-grow: 2;


}
#box-2 {
background-color:yellow;


}
#box-3 {
background-color:pink;



}

#box-4 {
background-color:aqua;


}

#box-5 {
background-color:blue;


}

#box-6 {

background-color:chocolate;

}


@media screen and (max-width: 600px) {
body {
background-color: olive;
}
}
<body>
<nav>
<div id="container">
<a id="box-1" href="#"></a>
<a id ="box-2" href="#"></a>
<a id="box-3" href="#"></a>
<a id="box-4" href="#"></a>
<a id="box-5" href="#"></a>
<a id="box-6"href="#"></a>
<a href="#"></a>
</div>
</nav>
</body>

你好,最近我在学习 flexbox,现在我正试图回到 @media 规则,但它似乎不起作用。我什至尝试将其更改为 w3 学校的@media 规则示例。但它并没有像 @media 规则中所写的那样将其背景颜色更改为橄榄色。谁能解释一下为什么它不起作用?

最佳答案

你需要像这样在你的CSS中添加html:

html, body {
background-color: olive;
}

Here's a working example

关于css - 为什么我的@media 查询不起作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51387699/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com