gpt4 book ai didi

html - 响应式网页设计媒体查询宽度不变

转载 作者:搜寻专家 更新时间:2023-10-31 22:58:23 25 4
gpt4 key购买 nike

我正在努力使页面响应,通过根据大小更改 div width,但除了 width 我能够更改的每个属性,width 没有改变根本。

我的 HTML 代码和元素样式

#main {
width: 100%;
display: flex;
flex-wrap: wrap;
}
#main div {
width: 100%;
}
@media screen and (max-width: 700px) {
#red {
display: none;
}
body {
background-color: yellow;
}
#blue {
width: 75%;
}
<body>
<div id="main">
<div id="red" style="background-color: red;">RED COLOR</div>
<div id="blue" style="background-color: blue;">BLUE COLOR</div>
<div id="green" style="background-color: orange;">GREEN color</div>
</div>

这是我试过的代码,但除了 width 我可以更改的每个属性如何更改 width 属性?

最佳答案

不要使用内联样式(这是一种不好的做法),这都是关于特异性的,因此您可以只设置 div(对于 width:100%)或通过向其添加父级来进一步指定您的 #blue,在本例中为 #main

可以计算特异性here

#main {
width: 100%;
display: flex;
flex-wrap: wrap;
}
div {
width: 100%;
}
#red {
background: red
}
#blue {
background: blue
}
#green {
background: green
}
@media screen and (max-width: 700px) {
#red {
display: none;
}
body {
background-color: yellow;
}
#blue {
width: 75%;
}
}
<div id="main">
<div id="red">RED COLOR</div>
<div id="blue">BLUE COLOR</div>
<div id="green">GREEN color</div>
</div>

关于html - 响应式网页设计媒体查询宽度不变,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36604547/

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