CSS 媒体查询仅适用于浏览器调整大小 (Chrome)
CSS Media Query only works on browser resize (Chrome)
我有一个网站,该网站具有针对响应能力的媒体查询。 CSS 在 Firefox 和 IE 上工作得很好,但在 Chrome.
上不行
目前,该网站有两个浮动 div,随着视口宽度的减小,div 会相互堆叠。 (我有一个 'large mode' 和一个 'small mode')。
我的问题是,第二个 div 在 'large mode' 中时应该是 top:20%
- 这在 Firefox 和 IE 中有效,但仅在 Chrome 中有效,如果我调整大小浏览器。这就像 Chrome 在页面首次加载时忽略了 top:20%
。
这是我目前的CSS(不完美还请见谅,我只是一个学习型的高中生):
body{
margin:0;
padding:0;
}
div{
height:90vh;
font-family: 'Roboto', sans-serif;
}
#sectionone {
background-color:#AB3E5B;
padding-top:3%;
padding-left:20%;
padding-right:20%;
padding-bottom:0;
margin:auto;
}
#sectiontwo {
text-align:center;
padding-top: 10%;
font-size:3.5vh;
color:#666666;
}
#sectionthree {
background-color:#AB3E5B;
}
#scrolldownimage {
bottom:10%;
position:absolute;
text-align:center;
left:50%;
margin-left:-6mm;
max-width:73px;
min-width:40px;
}
/* WHEN IN SMALL MODE */
@media screen and (max-width: 300mm) {
#herophone {
max-width:100%;
max-height:55vh;
width:auto;
height:auto;
}
#onea {
float:left;
width:100%;
height:auto;
text-align:center;
max-height:80%;
}
#oneb {
height:auto;
width:100%;
max-height:80%;
font-size:3.5vh;
text-align:center;
color: white;
position: relative;
}
}
/* WHEN IN LARGE MODE */
@media screen and (min-width: 300mm) {
#onea {
width:45%;
height:80%;
float:left;
text-align:center;
display: block;
justify-content: center;
}
#oneb {
width:45%;
height: 80%;
float:right;
font-size:5vh;
top:20%;
max-height:80%;
text-align:center;
color: white;
position: relative;
}
#herophone {
max-width:100%;
max-height:100%;
width:auto;
height:auto;
}
}
<head>
<!DOCTYPE html>
<link rel="stylesheet" type="text/css" media="screen" href="styles.css">
<link href='http://fonts.googleapis.com/css?family=Roboto:100' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="sectionone">
<div id="onea">
<img src="images/Three - Small.png" height="auto" width="auto" alt="screenshot" id="herophone">
</div>
<div id="oneb">
store maps
<br>
in your pocket.
<br>
<br>
meet wai
<br>
<span style="font-size:2vh"> (where am i)</span>
</div>
<br>
<p>
<a data-scroll data-options='{"easing":"easeOutQuad"}' href="#sectiontwo">
<img src="images/down.png" alt="down" width="10mm" height="auto" id="scrolldownimage">
</a>
</p>
</div>
<div id="sectiontwo">
WAI (Where am I) is a phone app that has been developed to make shopping easier.
<br>
<br>
Get instant access store maps of some of Australia's leading shopping centres.
<br>
<br>
</div>
<div id="sectionthree">
</div>
</body>
<!-- Scroll Script -->
<script src="scroll/dist/js/smooth-scroll.js"></script>
<script>
smoothScroll.init();
</script>
我解决了这个问题。
有冲突CSS:
top:20%
干扰了设置为 bottom:10%
的按钮(图像)
所以我把按钮放在一个单独的 div
我有一个网站,该网站具有针对响应能力的媒体查询。 CSS 在 Firefox 和 IE 上工作得很好,但在 Chrome.
上不行目前,该网站有两个浮动 div,随着视口宽度的减小,div 会相互堆叠。 (我有一个 'large mode' 和一个 'small mode')。
我的问题是,第二个 div 在 'large mode' 中时应该是 top:20%
- 这在 Firefox 和 IE 中有效,但仅在 Chrome 中有效,如果我调整大小浏览器。这就像 Chrome 在页面首次加载时忽略了 top:20%
。
这是我目前的CSS(不完美还请见谅,我只是一个学习型的高中生):
body{
margin:0;
padding:0;
}
div{
height:90vh;
font-family: 'Roboto', sans-serif;
}
#sectionone {
background-color:#AB3E5B;
padding-top:3%;
padding-left:20%;
padding-right:20%;
padding-bottom:0;
margin:auto;
}
#sectiontwo {
text-align:center;
padding-top: 10%;
font-size:3.5vh;
color:#666666;
}
#sectionthree {
background-color:#AB3E5B;
}
#scrolldownimage {
bottom:10%;
position:absolute;
text-align:center;
left:50%;
margin-left:-6mm;
max-width:73px;
min-width:40px;
}
/* WHEN IN SMALL MODE */
@media screen and (max-width: 300mm) {
#herophone {
max-width:100%;
max-height:55vh;
width:auto;
height:auto;
}
#onea {
float:left;
width:100%;
height:auto;
text-align:center;
max-height:80%;
}
#oneb {
height:auto;
width:100%;
max-height:80%;
font-size:3.5vh;
text-align:center;
color: white;
position: relative;
}
}
/* WHEN IN LARGE MODE */
@media screen and (min-width: 300mm) {
#onea {
width:45%;
height:80%;
float:left;
text-align:center;
display: block;
justify-content: center;
}
#oneb {
width:45%;
height: 80%;
float:right;
font-size:5vh;
top:20%;
max-height:80%;
text-align:center;
color: white;
position: relative;
}
#herophone {
max-width:100%;
max-height:100%;
width:auto;
height:auto;
}
}
<head>
<!DOCTYPE html>
<link rel="stylesheet" type="text/css" media="screen" href="styles.css">
<link href='http://fonts.googleapis.com/css?family=Roboto:100' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="sectionone">
<div id="onea">
<img src="images/Three - Small.png" height="auto" width="auto" alt="screenshot" id="herophone">
</div>
<div id="oneb">
store maps
<br>
in your pocket.
<br>
<br>
meet wai
<br>
<span style="font-size:2vh"> (where am i)</span>
</div>
<br>
<p>
<a data-scroll data-options='{"easing":"easeOutQuad"}' href="#sectiontwo">
<img src="images/down.png" alt="down" width="10mm" height="auto" id="scrolldownimage">
</a>
</p>
</div>
<div id="sectiontwo">
WAI (Where am I) is a phone app that has been developed to make shopping easier.
<br>
<br>
Get instant access store maps of some of Australia's leading shopping centres.
<br>
<br>
</div>
<div id="sectionthree">
</div>
</body>
<!-- Scroll Script -->
<script src="scroll/dist/js/smooth-scroll.js"></script>
<script>
smoothScroll.init();
</script>
我解决了这个问题。
有冲突CSS:
top:20%
干扰了设置为 bottom:10%
所以我把按钮放在一个单独的 div