CSS 媒体查询仅适用于浏览器调整大小 (Chrome)

Question

我有一个网站，该网站具有针对响应能力的媒体查询。 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>

Answer 1

我解决了这个问题。

有冲突CSS： top:20% 干扰了设置为 bottom:10%

的按钮（图像）

所以我把按钮放在一个单独的 div

CSS 媒体查询仅适用于浏览器调整大小 (Chrome)

CSS Media Query only works on browser resize (Chrome)

html

css

responsive-design

media-queries

window-resize