我在 Chrome 中遇到了这个奇怪的媒体查询问题，这个问题相当模糊，但真的让我很烦，所以我希望在这里找到解决方案，或者至少确认我不会发疯......
基本上，似乎当媒体查询启动时，页面将从内容滚动离开屏幕的状态（因此您有 y 轴滚动条）变为内容现在适合屏幕的状态（因此不应出现 y 轴滚动条）似乎有一小段时间页面布局呈现为好像滚动条在那里，即使它不存在（因此会出现试图填满整个屏幕的东西这段时间不要）
我已经建立了一个简单的页面来展示这个问题。它包含两个浮动 div，当媒体查询以小于 500px 的宽度启动时，它们被设置为不再浮动并具有更大的宽度——此时标题栏也会从蓝色变为红色（为了清楚起见）。
http://appasylum.net/test/mediaQueryChromeScrollBarIssue/
<!DOCTYPE html>
<html>
<head>
<title>Media Query Chrome Scrollbar issue</title>
<style type="text/css">
html,
body
{
margin:0;
padding:0;
}
.header
{
background-color: blue;
padding: 10px;
color: white;
font-family: Helvetica, Arial, sans-serif;
}
.content
{
background-color: #f5f5f5;
border: 1px solid #e3e3e3;
float: left;
width: 40%;
margin: 20px;
}
@media (max-width: 500px) {
.header
{
background-color: red;
}
.content
{
float:none;
width: 90%;
}
}
</style>
</head>
<body>
<div class="header">
Header
</div>
<div class="content"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nec purus ut quam vestibulum porta sed ultrices velit. Suspendisse dapibus justo id ligula iaculis cursus. Fusce non diam ut ante porta lacinia id vel nisl. Mauris laoreet orci vel nulla imperdiet ac rhoncus diam accumsan. Quisque sed mauris mi, sollicitudin commodo ligula. Etiam arcu arcu, vehicula ut porttitor id, viverra non augue. Mauris laoreet fringilla tempus. Praesent elit elit, molestie eget bibendum vitae, fringilla nec turpis. Suspendisse eget ipsum sed sem egestas ultricies. Cras eleifend imperdiet magna nec elementum. Etiam arcu arcu, vehicula ut porttitor id, viverra non augue. Mauris laoreet fringilla tempus. Praesent elit elit, molestie eget bibendum vitae, fringilla nec turpis. Suspendisse eget ipsum sed sem egestas ultricies. Cras eleifend imperdiet magna nec elementum.Etiam arcu arcu, vehicula ut porttitor id, viverra non augue. Mauris laoreet fringilla tempus. Praesent elit elit, molestie eget bibendum vitae, fringilla nec turpis. Suspendisse eget ipsum sed sem egestas ultricies. Cras eleifend imperdiet magna nec elementum.
</div>
<div class="content"> Aliquam in mauris quis arcu aliquam aliquam eu ut mauris. Quisque ut tortor eu massa scelerisque vehicula. Morbi velit diam, egestas at placerat vel, tincidunt a nulla. Vivamus arcu augue, vulputate at elementum sit amet, adipiscing quis odio. Etiam arcu arcu, vehicula ut porttitor id, viverra non augue. Mauris laoreet fringilla tempus. Praesent elit elit, molestie eget bibendum vitae, fringilla nec turpis. Suspendisse eget ipsum sed sem egestas ultricies. Cras eleifend imperdiet magna nec elementum
</div>
</body>
</html>
要复制在大于 500 像素宽（蓝色标题）的窗口中打开上面的链接，并且高度只能让内容滚动离开页面 - 然后慢慢减小窗口的宽度直到它变成红色（即小于500 像素宽）。假设您的窗口高度导致非浮动 div 不再需要滚动条（反之亦然） - 在红色和蓝色标题之间的过渡点（即媒体查询变为活动状态）您应该注意到很短的时间红色标题没有填满整个视口宽度的时间段。