这是我的HTML代码
<article class="article1" style="width: 610px; border: 2px solid gray;
padding: 10px; border-radius: 10px;
margin:5px;float: left;">
<a href="#" class="imagemain"><img src= "img/letters.jpg"
alt="" width="590" height="250"
class="image0" />
<h1 style="font-family: 'Poppins',sans-serif;
font-size:20px; color: black; padding-top: 10px;"> learning any language.</h1>
<p> March 17,2020 </p>
</a>
</article>
更改媒体大小后，如何更改article1类的宽度。当我这样做时，宽度没有变化。但是仅背景色就改变了这是我的CSS代码
@media screen and (max-width:768px){
.article1{
width: 250px;
background-color:red;
}
}
CSS表示级联样式表，是说它级联地应用样式（按顺序）。它将基本上按以下顺序应用样式：标记名>类> id>内联CSS，因此您的代码无法使用，因为您无法覆盖内联声明的CSS属性（除非您使用!important）。
您应该为CSS使用其他文件，或者至少将CSS放在<style>的<head>标记中。互联网上有很多文档，所以只有Google。
我建议您查看的另一件事是vw和vh度量，这意味着视图宽度和视图高度。例如，如果您使用25vw，则意味着它将是窗口宽度的25/100部分，即25％。