关键词：
【中文标题】简单的媒体查询规则在页面刷新时更改【英文标题】：Simple Media query rules change on page refresh 【发布时间】：2017-07-08 22:56:24 【问题描述】：我有一个奇怪的问题。我的 CSS 中的媒体查询规则以它们应该的特定宽度触发，但是如果我已经将浏览器窗口调整到那个较小的宽度，然后将浏览器窗口扩展到它之外，就会发生一些奇怪的事情。在我刷新页面之前，一切看起来都很正常。只有在页面刷新时，布局才会以意想不到的方式发生变化。目标当然是让媒体查询正常运行，因为页面刷新不应该改变任何规则。
我试图用简单的骨骼重现问题：
//CSS media queries added to style tag here to prevent scrolling in other code blocks
var style = document.getElementsByTagName('style')[ 0 ];
style.innerHTML +=
' \
@media( max-width: 550px ) \
body \
background-color: #ddd; \
transition: 1s; \
\
main \
height: auto; \
text-align: center; \
\
.circle, .about-container \
float: none; \
\
.circle \
display: inline-block; \
transform: translateY( 0 ); \
\
.about-container \
margin: 0 auto; \
text-align: left; \
\
\
@media( min-width: 551px ) \
.circle \
transform: translateY( 0 ); \
\
\
';/* ///////////////// ELEMENTS IN ORDER THEY APPEAR IN HTML ///////////////// */
*
box-sizing: border-box;
main
max-width: 600px;
height: 11rem;
margin: 0 auto;
padding-top: 10px;
font-size: 0.8rem;
text-align: left;
.circle
width: 100px;
height: 100px;
background-color: #444;
border-radius: 50%;
float: left;
top: calc( 50% - 10px );
.about-container
width: 75%;
float: right;
body button
display: block;
margin: 0 auto;
padding: 8px;
<head>
<style>
/* ///////////// BASIC STYLES TO MAKE THIS SNIPPET LOOK BETTER ///////////// */
@import url('https://necolas.github.io/normalize.css/latest/normalize.css');
.clearfix:after
content: "";
display: block;
clear: both;
.vertically-center
position: relative;
top: 50%;
transform: translateY( -50% );
</style>
</head>
<body>
<main class="clearfix">
<div class="circle vertically-center"></div>
<div class="about-container">
<h3>About</h3>
<p>
This problem is wierd. When <strong>snippet is made full screen</strong>
and browser width is shrunk to less than <strong>550px</strong> <em>
( You will know you're at 550px because the background will darken )</em>
the layout changes - as expected. However when window is expanded beyond
550px again and <strong>Reload Frame</strong> is clicked the layout
unexpectedly updates itself. <br><br>What's going on?
</p>
</div>
</main>
<button onclick="location.reload()">Reload Frame</button>
</body>虽然很奇怪，但我觉得这有一个简单的解决方案，我希望？
编辑：我在 chrome 浏览器上看到了这些结果。将上传一个 GIF 来演示我在下面看到的内容。
【问题讨论】：
你 1) 翻到整页 2) 缩小宽度直到背景变暗。 3）扩大宽度，直到背景为白色。 4) 点击按钮？ 你用的是什么浏览器？ 铬。我正在上传一个 gif 来演示我所看到的。 @MrLister 我的问题不是 JavaScript 问题。这是刷新时触发的 CSS 媒体查询。这里的 JavaScript 仅用于这个演示。 @L.S 请查看带有显示我的问题的 gif 更新。 【参考方案1】：Chrome 似乎对同时浮动、定位和翻译的元素存在问题。同样，这是 Chrome 中的缺陷，而不是您的代码中的缺陷。 解决这个问题的一种方法是不使用定位，只使用平移来移动圆。
//CSS media queries added to style tag here to prevent scrolling in other code blocks
var style = document.getElementsByTagName('style')[ 0 ];
style.innerHTML +=
' \
@media( max-width: 550px ) \
body \
background-color: #ddd; \
\
main \
height: auto; \
text-align: center; \
\
.circle, .about-container \
float: none; \
\
.circle \
display: inline-block; \
transform: translateY(-40%); /* changed a bit to compensate */ \
\
.about-container \
margin: 0 auto; \
text-align: left; \
\
\
';/* ///////////////// ELEMENTS IN ORDER THEY APPEAR IN HTML ///////////////// */
body
transition: 0.25s;
main
max-width: 600px;
margin: 0 auto;
height: 11rem;
padding-top: 10px;
font-size: 0.8rem;
text-align: left;
.circle
height: 100px;
width: 100px;
background-color: #444;
border-radius: 50%;
float: left;
/* this was moved here */
.vertically-center
transform: translateY(40%);
.about-container
width: 75%;
float: right;
body button
display: block;
margin: 0 auto;
padding: 8px;
<head>
<style>
/* ///////////// BASIC STYLES TO MAKE THIS SNIPPET LOOK BETTER ///////////// */
@import url('https://necolas.github.io/normalize.css/latest/normalize.css');
*
box-sizing: border-box;
.clearfix:after
content: "";
display: block;
clear: both;
/* moved the .vertically-center bit to before the media query */
</style>
</head>
<body>
<main class="clearfix">
<div class="circle vertically-center"></div>
<div class="about-container">
<h3>About</h3>
<p>
This problem is pretty wierd. When you
<strong>make this snippet full screen</strong> and try shrinking the browser
width to less than <strong>550px</strong> <em>( You will know you're at 550px
because the background will darken )</em> the layout changes - Which is
expected. However when you expand the window beyond 550px again and click
<strong>Reload Frame</strong> the current layout unexpectedly updates
itself. <br><br>What's going on?
</p>
</div>
</main>
<button onclick="location.reload()">Reload Frame</button>
</body>但正如其他人所展示的，还有更多的解决方案。任君挑选！
【讨论】：
感谢您指出这是 Chrome 中的浏览器怪癖。我最初甚至没想过要检查这一点。我做了更多的测试，似乎transform 属性对带来这个问题没有影响。它是定位元素和浮动。删除其中任何一个并修复问题。我喜欢你的解决方案。做更多的测试。
我找到了一个更简单的解决方案，请看我的回答。【参考方案2】：
解决方案： 简单的解决方案是将margin-top:11% 添加到div.vertically-center，然后在调整窗口大小后圆圈恢复到原来的状态..！ :D
修复 CSS 问题有很多方法可以修复，甚至可以通过添加一些 html 元素以及 css 代码或仅通过更改当前 css 而不添加任何元素来修复它。所以这取决于你哪一个那就跟着吧。
更好的使用方法：
由于我检查了margin-top:11% 与 Firefox 样式相混淆，因此您可以使用以下两种方法将其仅应用于 Chrome：
1) Chrome JavaScript 解决方案：
if (navigator.appVersion.indexOf("Chrome/") != -1)
document.getElementById("vertically-center").style.marginTop = "11%";
2) Chrome CSS 解决方案：
/* Chrome 29+ */
@media screen and (-webkit-min-device-pixel-ratio:0)
and (min-resolution:.001dpcm)
.vertically-center margin-top:11%;
/* Chrome 22-28 */
@media screen and(-webkit-min-device-pixel-ratio:0)
.selector -chrome-:only(;
property:value;
);
【讨论】：
【参考方案3】：更新代码 试试这个运行代码
<div class="circlemain">
<div class="circle vertically-center"></div>
</div>
.circlemain
top: 50%;
position: relative;
@media( max-width: 550px )
.vertically-center
position: relative;
transform: translateY( 0% ) !important;
top: 50%;
//CSS media queries added to style tag here to prevent scrolling in other code blocks
var style = document.getElementsByTagName('style')[ 0 ];
style.innerHTML +=
' \
@media( max-width: 550px ) \
body \
background-color: #ddd; \
\
main \
height: auto; \
text-align: center; \
\
.circle, .about-container \
float: none; \
\
.circle \
display: inline-block; \
transform: translateY( 0 ); \
\
.about-container \
margin: 0 auto; \
text-align: left; \
\
\
@media( min-width: 551px ) \
.circle \
transform: translateY( 0 ); \
\
\
';/* ///////////////// ELEMENTS IN ORDER THEY APPEAR IN HTML ///////////////// */
main
max-width: 600px;
margin: 0 auto;
height: 11rem;
padding-top: 10px;
font-size: 0.8rem;
text-align: left;
.circlemain
top: 50%;
position: relative;
.circle
height: 100px;
width: 100px;
background-color: #444;
border-radius: 50%;
float: left;
top: calc( 50% - 10px );
.about-container
width: 75%;
float: right;
body button
display: block;
margin: 0 auto;
padding: 8px;
@media( max-width: 550px )
.vertically-center
position: relative;
transform: translateY( 0% ) !important;
top: 50%;
<head>
<style>
/* ///////////// BASIC STYLES TO MAKE THIS SNIPPET LOOK BETTER ///////////// */
@import url('https://necolas.github.io/normalize.css/latest/normalize.css');
*
box-sizing: border-box;
.clearfix:after
content: "";
display: block;
clear: both;
.vertically-center
position: relative;
top: 50%;
transform: translateY( -50% );
</style>
</head>
<body>
<main class="clearfix">
<div class="circlemain">
<div class="circle vertically-center"></div>
</div>
<div class="about-container">
<h3>About</h3>
<p>
This problem is pretty wierd. When you
<strong>make this snippet full screen</strong> and try shrinking the browser
width to less than <strong>550px</strong> <em>( You will know you're at 550px
because the background will darken )</em> the layout changes - Which is
expected. However when you expand the window beyond 550px again and click
<strong>Reload Frame</strong> the current layout unexpectedly updates
itself. <br><br>What's going on?
</p>
</div>
</main>
<button onclick="location.reload()">Reload Frame</button>
</body>【讨论】：
您能解释一下为什么会这样吗，OP 的代码有什么问题，以及如何解决这个问题？顺便说一句，这个 sn-p 的行为与窄窗口中的 OP 不同。【参考方案4】：因此，感谢先前的答案指出这是 chrome 中的浏览器怪癖。然而，没有一个解决方案尽可能简单。我发现关键问题是@media( max-width: 550px ) 媒体查询下的display: inline-block。我删除了它，将其更改为 display: block 并添加了 margin: 0 auto 以使圆圈居中，因为它不再受其父级上的 text-align: center 规则的影响。这对我来说以最简单的方式解决了这个问题。这是sn-p：
//CSS media queries added to style tag here to prevent scrolling in other code blocks
var style = document.getElementsByTagName('style')[ 0 ];
style.innerHTML +=
' \
@media( max-width: 550px ) \
body \
background-color: #ddd; \
transition: 1s; \
\
main \
height: auto; \
text-align: center; \
\
.circle, .about-container \
float: none; \
\
.circle \
display: block; /* changed display: inline-block to display: block */ \
margin: 0 auto; /* added this line to recenter the circle */ \
transform: translateY( 0 ); \
\
.about-container \
margin: 0 auto; \
text-align: left; \
\
\
@media( min-width: 551px ) \
.circle \
transform: translateY( 0 ); \
\
\
';/* ///////////////// ELEMENTS IN ORDER THEY APPEAR IN HTML ///////////////// */
*
box-sizing: border-box;
main
max-width: 600px;
height: 11rem;
margin: 0 auto;
padding-top: 10px;
font-size: 0.8rem;
text-align: left;
.circle
width: 100px;
height: 100px;
background-color: #444;
border-radius: 50%;
float: left;
top: calc( 50% - 10px );
.about-container
width: 75%;
float: right;
body button
display: block;
margin: 0 auto;
padding: 8px;
<head>
<style>
/* ///////////// BASIC STYLES TO MAKE THIS SNIPPET LOOK BETTER ///////////// */
@import url('https://necolas.github.io/normalize.css/latest/normalize.css');
.clearfix:after
content: "";
display: block;
clear: both;
.vertically-center
position: relative;
top: 50%;
transform: translateY( -50% );
</style>
</head>
<body>
<main class="clearfix">
<div class="circle vertically-center"></div>
<div class="about-container">
<h3>About</h3>
<p>
This problem is wierd. When <strong>snippet is made full screen</strong>
and browser width is shrunk to less than <strong>550px</strong> <em>
( You will know you're at 550px because the background will darken )</em>
the layout changes - as expected. However when window is expanded beyond
550px again and <strong>Reload Frame</strong> is clicked the layout
unexpectedly updates itself. <br><br>What's going on?
</p>
</div>
</main>
<button onclick="location.reload()">Reload Frame</button>
</body>【讨论】：
在屏幕更改大小时管理列表分隔符（媒体查询）
...间管理分隔符（如“-”）。当我们只有一行的时候比较简单，但是我不能多行。当网站显示在大屏幕上时，我有：示例居中对齐Listitem1-listitem2-listitem3-...- 查看详情
在浏览器中更改 URL 参数时的 Angular 页面刷新
...inbrowser【发布时间】：2015-07-3011:35:54【问题描述】：非常简单的要求，但很难做到。有一个简单的页面，我在url路径中打印参数。http://localhost:8888/ngtest.html#/1234567ngtest.html<divng-app="ap 查看详情
当有人进行更改时自动刷新页面[重复]
...一些关于使用彗星的东西，但我对此一无所知。有没有更简单的方法 查看详情
React 页面不会在 url 查询更改时重新呈现
】React页面不会在url查询更改时重新呈现【英文标题】：Reactpagedoesnotrerenderonurlquerychange【发布时间】：2016-12-2521:53:11【问题描述】：我正在尝试根据url中的查询创建一个具有不同内容的反应页面。例如：things?type=0和things?type=1导... 查看详情
jQuery更改媒体查询宽度值
】jQuery更改媒体查询宽度值【英文标题】：jQuerychangemediaquerywidthvalue【发布时间】：2013-06-1309:47:01【问题描述】：是否可以在页面运行时使用jQuery或其他任何东西来更改@mediaquerycss的宽度值？例如，如果在style.css中我有@mediascreenan... 查看详情
css媒体查询
...，使页面在不同在终端设备下达到不同的渲染效果。前面简单的介绍了MediaQueries如何引用到项目中，但MediaQueries有其自己的使用规则。具体来说,MediaQueries的使用方法如下。@media媒体类型and（媒体特性）{你的样式}注意：使用MediaQ... 查看详情
媒体查询中移动横幅的加载时间
】媒体查询中移动横幅的加载时间【英文标题】：Loadingtimewithmobilebannerinmediaquery【发布时间】：2022-01-2401:47:15【问题描述】：在计算机上加载我的页面时，我有正常的横幅。但是，我希望在移动设备（媒体查询）上有更小的版本... 查看详情
Rails 页面在每次刷新时更改翻译
】Rails页面在每次刷新时更改翻译【英文标题】：Railspagechangingtranslationsoneveryrefresh【发布时间】：2021-09-2812:24:13【问题描述】：我的RubyonRails应用程序上有一个页面，每次刷新都会更改翻译。这里的棘手之处在于它仅在生产实例... 查看详情
媒体查询使用——@media
...，使页面在不同在终端设备下达到不同的渲染效果。前面简单的介绍了MediaQueries如何引用到项目中，但MediaQueries有其自己的使用规则。具体来说,MediaQueries的使用方法如下。@media媒体类型and（媒体特性）{你的样式}注意：使用MediaQ... 查看详情
Jquery，.height() 在页面刷新时更改但在加载时不更改
】Jquery，.height()在页面刷新时更改但在加载时不更改【英文标题】：Jquery,.height()changingonpagerefreshbutnotonload【发布时间】：2011-05-1501:33:51【问题描述】：我已经看过以下话题：JqueryLoadingproblemonfirstload/hardrefresh这似乎是我遇到的问... 查看详情
为啥我的简单媒体查询在模拟手机时会产生滚动条[重复]
】为啥我的简单媒体查询在模拟手机时会产生滚动条[重复]【英文标题】：Whymysimplemediaqueriesproducescrollbarswhenemulatingamobilephone[duplicate]为什么我的简单媒体查询在模拟手机时会产生滚动条[重复]【发布时间】：2014-07-2517:39:28【问题... 查看详情
覆盖 CSS 媒体查询
】覆盖CSS媒体查询【英文标题】：OverrideCSSmediaqueries【发布时间】：2012-07-1015:11:21【问题描述】：我每天都在处理一个使用我不喜欢的CSS媒体查询的页面；我宁愿使用整页（其中大多数与TwitterBootstrap菜单在窄于768像素时折叠有关... 查看详情
下一个 JS apollo 链接更改清除查询，必须刷新页面才能运行查询
】下一个JSapollo链接更改清除查询，必须刷新页面才能运行查询【英文标题】：nextJSapolloLinkchangeclearsquery,havetorefreshpageforquerytorun【发布时间】：2021-05-3111:25:10【问题描述】：我正在将NextJS与Apollo一起使用，并且我有以下查询可以... 查看详情
浏览器调整大小时的 CSS 媒体查询？
】浏览器调整大小时的CSS媒体查询？【英文标题】：CSSMediaQueriesasBrowserResizes?【发布时间】：2011-07-0810:14:57【问题描述】：我认为CSS媒体查询在用户调整浏览器大小时不起作用？用户必须刷新页面才能使媒体查询生效？我如何使... 查看详情
最大化浏览器和切换选项卡时，媒体查询不会更改 CSS
...【发布时间】：2013-05-1716:07:02【问题描述】：这里有一个简单的媒体查询的CSS。http://codepen.io/anon/pen/nuxaw当我缩小页面以使视口小于320时，该框变为绿色。现在，如果我按照这些步骤操作，浏览器 查看详情
css3--媒体查询@media
...，使页面在不同在终端设备下达到不同的渲染效果。前面简单的介绍了MediaQueries如何引用到项目中，但MediaQueries有其自己的使用规则。具体来说,MediaQueries的使用方法如下。@media媒体类型and（媒体特性）{你的样式}注意：使用MediaQ... 查看详情
Rails 5.2 数据表不会在页面更改时刷新数据
】Rails5.2数据表不会在页面更改时刷新数据【英文标题】：Rails5.2DatatableswillnotRefreshDataonPageChange【发布时间】：2019-09-1910:31:18【问题描述】：我有一个配置了数据表的rails5.2项目。该插件工作正常，但如果我更改页面然后点击后... 查看详情
动态媒体查询
】动态媒体查询【英文标题】：DynamicMediaQueries【发布时间】：2013-04-1110:48:29【问题描述】：我目前正在使用js/jq调整大小事件来将css规则应用于水平菜单（宽度可变），当它对于屏幕来说太大时。然而，在应用新规则之前，菜单... 查看详情