Question

当前，我正在尝试对网页实施浏览器断点。我首先添加媒体查询，是为了方便div类的断点，只是发现它的调用方式偏离了最大宽度值（值是500px，调用为124.867px）。

我已经尝试过此answer和此answer中说明的两种分辨率。

无礼：

    .announcement {
        width: 90%;
        height: 40%;
        background: #4C2765;
        display: block;
        margin: 0 auto;
        position: relative;
        margin-top: 2%;
    }


@media screen and (max-width: 40%) {
    .announcement {
        background: green;
    }
}

HTML：


        <div class="announcements">
                <h3 class="title">Announcements</h3>
                <div class="announcement">
                    <div class="announcement-header">
                        <div class="announcement-title">Empire Institute of Information</div>
                        <div class="announcement-author">by John Doe</div>        
                    </div>
                    <p class="preview-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum gravida blandit leo, dictum venenatis magna vulputate non. Mauris ac pretium mi. Ut laoreet urna in facilisis blandit.
                            Donec nec risus nec orci auctor rutrum ut in felis. Ut euismod augue non est rutrum, et ullamcorper dui. Ut arcu odio, tristique eget pretium porttitor, finibus ac o...
                    </p>
                    <button class="continue-reading">Continue Reading</button>
            </div>
            <div class="announcement">
                    <div class="announcement-header">
                        <div class="announcement-title">Empire Institute of Information</div>
                        <div class="announcement-author">by John Doe</div>        
                    </div>
                    <p class="preview-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum gravida blandit leo, dictum venenatis magna vulputate non. Mauris ac pretium mi. Ut laoreet urna in facilisis blandit.
                            Donec nec risus nec orci auctor rutrum ut in felis. Ut euismod augue non est rutrum, et ullamcorper dui. Ut arcu odio, tristique eget pretium porttitor, finibus ac o...
                    </p>
                    <button class="continue-reading">Continue Reading</button>
            </div>
            <div class="announcement">
                    <div class="announcement-header">
                        <div class="announcement-title">Empire Institute of Information</div>
                        <div class="announcement-author">by John Doe</div>        
                    </div>
                    <p class="preview-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum gravida blandit leo, dictum venenatis magna vulputate non. Mauris ac pretium mi. Ut laoreet urna in facilisis blandit.
                            Donec nec risus nec orci auctor rutrum ut in felis. Ut euismod augue non est rutrum, et ullamcorper dui. Ut arcu odio, tristique eget pretium porttitor, finibus ac o...
                    </p>
                    <button class="continue-reading">Continue Reading</button>
            </div>
        </div>

我希望当每个div的宽度小于500px时，每个公告div的背景都会变为绿色。

Answer 1

奇怪的是，计算机重启似乎可以解决问题。

浏览器断点媒体查询以意外宽度调用

1 个答案: