Nir*_*eya 5 html css media-queries flexbox responsive-design
我正在通过width根据大小更改 div来使页面具有响应性,但除了宽度之外,我能够更改的每个属性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%;
}Run Code Online (Sandbox Code Playgroud)
<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>Run Code Online (Sandbox Code Playgroud)
这是我尝试过的代码,但除了width我能够更改的每个属性如何更改width属性?
小智 3
问题是你的#main div风格比你的#blue风格更具体。
将您的媒体查询样式更改为
#main #blue{
width: 75%;
}
Run Code Online (Sandbox Code Playgroud)
| 归档时间: |
|
| 查看次数: |
2994 次 |
| 最近记录: |