简单媒体查询规则在页面刷新时更改
sol*_*yon 6 css google-chrome css-float media-queries
我有一个奇怪的问题.我的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,演示我在下面看到的内容.
感谢之前的答案指出这是 chrome 浏览器的一个怪癖。然而，没有一个解决方案如此简单。我发现关键问题出在媒体查询display: inline-block下@media( max-width: 550px )。我删除了它，将其更改为display: block并添加margin: 0 auto到中心位置，因为它不再受text-align: center其父级规则的影响。这对我来说以最简单的方式解决了问题。这是片段：
//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>
| 归档时间： |
|
| 查看次数： |
1217 次 |
| 最近记录： |