Question

我在CSS中还很陌生，正在尝试修复以下代码。我想要一个简单的东西，其中屏幕尺寸小于400，更改图像尺寸。它应该可以，但是不能。我试图做

* {
    box-sizing: border-box;
} 

body, html {
    background: #fff;
    height: 100%;
    margin: 10px;
}

.left__img2 {
    position: absolute;
    float: left;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
    border-radius: 20px;
    width: 600px;
    height: 400px; 
} 


@media screen and (max-width: 500px) {
.left__img2 {
    width: 10px;
} 
}

Answer 1

在以下示例（调整窗口大小）中，您的代码效果很好，也许是由于其余代码的副作用，您能否向我们展示其余代码？ >

.left__img2 {
    position: absolute;
    float: left;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
    border-radius: 20px;
    width: 600px;
    height: 400px; 
    background-color: red;
} 


@media screen and (max-width: 500px) {
.left__img2 {
    width: 10px;
    background-color: yellow;
}

<div class="left__img2"><div>

Answer 2

CSS顶部的媒体查询需要！important来统治媒体查询。底部的媒体查询不需要！important。我将查询放在顶部，因此在以后使用！important统治其他任何样式。

@media screen and (max-width: 500px) {
.left__img2 {
width: 10px !important;
} 
}

* {
box-sizing: border-box;
} 

body, html {
background: #fff;
height: 100%;
margin: 10px;
}

.left__img2 {
position: absolute;
float: left;
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
border-radius: 20px;
width: 600px;
height: 400px; 
}

Answer 3

我认为这会起作用。

{'Bobby': [set(), set(), set(), {'movie_2'}, set(), {'movie_1'}],
 'Alec': [set(), {'movie_1'}, {'movie_3'}, set(), set(), {'movie_4'}],
 'Carren': [set(), set(), {'movie_4'}, {'movie_2'}, set(), {'movie_1'}],
 'Deric': [set(), {'movie_1'}, set(), {'movie_2'}, set(), {'movie_3'}]}

如何根据显示尺寸更改CSS

3 个答案: