css - 如何根据显示的大小更改css

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

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; 
}