Question

我的网站有针对响应性的媒体查询。 CSS在Firefox和IE上运行得很好，但在Chrome上却没有。

目前，该网站有两个浮动div，当视口宽度减小时，div堆叠在彼此之上。（我有一个＆＃39;大模式＆＃39;以及一个小模式＆＃39;）。

我的问题是，当处于“大模式”时，第二个div应为top:20%。 - 这适用于Firefox和IE，但只有在我调整浏览器大小时才能在Chrome中使用。就像Chrome在首次加载页面时忽略top:20%一样。

这是我目前的CSS（对不起，如果它不完美，我只是一个学习高中生）：

＆＃13;

	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;
		
		}
		
	}

＆＃13;

<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>

＆＃13;

Answer 1

我解决了这个问题。

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

的按钮（图片）

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

中

CSS Media Query仅适用于浏览器调整大小（Chrome）

1 个答案: