媒體查詢不會讓我改變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;。媒體查詢中的其他樣式正在工作，因爲它們不與任何匹配的內聯樣式競爭。