Media Query 不会让我更改 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 选择器更具体，并且通常是不好的做法。 !important 可以覆盖任何东西，但这几乎总是不好的做法。

你应该重构你的代码并将你的样式移动到它自己的文件中，或者至少移动到文件顶部的你的样式标签，如果单独的文件是不可能的。这样，一切都会按应有的方式进行。

Answer 2

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