Question

我正在尝试使用媒体查询创建一个响应式网站，但最近遇到了一个我无法解决的错误。除了宽度之外，Media Query会更改所有内容。这是我的代码，任何帮助将不胜感激。

＆＃13;

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

＆＃13;

我看了一个类似的问题：Media query div not changing width but everything else works并采纳了他们的建议，但它仍然无效。

任何帮助将不胜感激！

感谢!!!!

Answer 1

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

Answer 2

您遇到了specificity问题。内联样式被认为比css选择器更具体，并且通常是不好的做法。！important可以覆盖任何东西，但这几乎总是不好的做法。

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

媒体查询不会让我更改Div宽度，但让我更改其他所有内容

2 个答案: