媒体查询不会让我改变Div宽度，但让我改变一切

Question

我想创建一个响应式网站与媒体查询，但最近遇到了我无法修复的错误。媒体查询改变了一切，除了宽度。这是我的代码，任何帮助将不胜感激。

<style> 
 
    @media (max-width:950px){ 
 
     .value { 
 
      width: 100%; 
 
      float:none; 
 
      background-color: black; 
 
     } 
 
    } 
 
</style> 
 
<div style="padding: 0px 5% 100px 5%; overflow:auto;"> 
 
    <div style="height: 400px;padding-top: 70px"> 
 
     <div class="value" style="width: 50%; float: left;text-align: center;padding: 0px 5% 0px 5%;"> 
 
      <img alt="Custom printed t-shirts at a low price." src="images/priceicon.jpg"> 
 
      <h3 style="font-size:24px;"><span>Additional Units Lower Your Price</span></h3> 
 
      <p>Use our simple, all-inclusive pricing system that gives instant access to printed t-shirts with screen-printing or embroidery. No hidden fees! Calculate prices <a title="Products" style="" href="https://www.coastalreign.com/products/">now</a>!</p> 
 
     </div> 
 

 
     <div class="value" style="width: 50%; float: left;text-align: center;padding: 0px 5% 0px 5%;"> 
 
      <img alt="We design you custom printed tshirts free of charge." src="images/designicon.jpg"> 
 
      <h3 style="font-size:24px;"><span>Expert Design Review</span></h3> 
 
      <p>Every order is reviewed by a designer after it is placed. After we convert images to print ready graphics, we will have a high quality mockup sent over for approval before we begin printing.</p> 
 
     </div> 
 
    </div> 
 

 
<div style="height: 400px;padding-top: 70px"> 
 
     <div class="value" style="width: 50%; float: left;text-align: center;padding: 0px 5% 0px 5%;"> 
 
       <img alt="Industry leading turnaround time for custom printed tshirts." src="images/timelyefficient.jpg"> 
 
       <h3 style="font-size:24px;"><span>Quick Processing and Free Shipping!</span></h3> 
 
       <p>All orders are completed in 7 business days guaranteed. We will ship your order of printed clothing free to anywhere in Canada.</p> 
 
     </div> 
 

 
     <div class="value" style="width: 50%; float: left;text-align: center;padding: 0px 5% 0px 5%;"> 
 
       <img alt="Quality custom printed t-shirts, on time and on budget." src="images/qualityicon.jpg"> 
 
       <h3 style="font-size:24px;"><span>We Invest In You.</span></h3> 
 
       <p>Need help before placing your order? Not an issue, our artists are able to provide design assistance before payments are been made. This allows you to see how your ideas look on a t-shirt, hoodie, sweatpants, before any commitments.</p> 
 
     </div> 
 
    </div> 
 
</div>

我看过一个类似的问题：Media query div not changing width but everything else works和使用他们的建议，但它仍然无法正常工作。

任何帮助，将不胜感激！

谢谢！

Answer 1

您遇到specificity问题。内联样式被认为比CSS选择器更具体，通常是不好的做法。重要的可以覆盖任何东西，但它几乎总是不好的做法。

如果单独的文件不可用，您应该重构代码并将样式移动到它自己的文件中，或者至少移动到文件顶部的样式标签。那样，一切都会按照它的方式工作。

Answer 2

您无法更改width的原因是width在您的HTML中被定义为嵌入式样式。要覆盖它，您需要使用width: 100% !important;。媒体查询中的其他样式正在工作，因为它们不与任何匹配的内联样式竞争。