简单媒体查询规则在页面刷新上发生变化
我有一个奇怪的问题。 我的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浏览器在浮动，定位和同时翻译元素方面存在问题。 再次，这是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> 解决方案：简单的解决方案是将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;
);}
}
更新代码试试这个运行代码
<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>