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

Question

目前，我正在尝试将浏览器断点实现到网页。我添加的第一个媒体查询是为了方便一类div 的断点，只是发现它调用的远远偏离了最大宽度值(值为 500px，调用为 124.867px(。

我已经尝试了这个答案和这个答案中说明的两个解决方案。

屁股：

    .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

Belay，奇怪的是，计算机重新启动似乎解决了这个问题。