javascript - @media 查询以一种奇怪的方式工作

Question

在圣诞节期间，我暂停了我网站的工作。这周我回来查看它，发现代码已被更改，不知何故。我已经包含了所有代码，但我要解决的主要部分是 .fadein CSS，尤其是下面的代码片段。

@media screen and (min-width: 1110px) {
.fadein img {
    width:auto;
    height:72.1%;
    position:absolute;
    left:50%;
    -webkit-transform: translate(-50%, -0%);
    -moz-transform: translate(-50%, -0%);
    margin:0;
    padding:0;
}

此代码中的某些内容导致我的幻灯片/图像显示为微小的缩略图大小的图像，而不是它们原本应显示的全屏大小。在删除宽度和/或高度属性时，图像变得比我喜欢的要大，但我无法缩放它。有任何想法吗？如果需要，其余代码在下面。谢谢!

$(function() {

    $('.fadein img:gt(0)').hide();
    
    setInterval(function() {
    
    	$('.fadein :first-child').fadeOut(2000)
      
        	.next('img').fadeIn(2000)
         
        	.end().appendTo('.fadein');
         
    	}, 5000);
});

html {
	margin:0;
	padding:0;
	height:100%;
	width:100%;
	position:relative;
}

body {
	margin:0;
	padding:0;
	height:100%;
	width:100%;
	position:absolute;
	bottom:0;
	top:0;
	left:0;
	right:0;
}

p {
	margin:0;
	padding:0;
	color:#1C1C1C;
}

img {
	margin:0;
	padding:0;
}

.maincontainer {
	margin:0;
	padding:0;
	position:relative;
}

.container {
	width:100%;
	min-height:100%;
	position:relative;
	margin:0;
	padding:0;
}

.container:after {
	content:"";
	display:block;
}

.logo {
	float:left;
	margin-left:30px;
	font-family:'Advent Pro', sans-serif;
	font-weight:100;
	font-size:40px;
	color:#1C1C1C;
}

.photography {
	width:100px;
	float:left;
	margin-top:7px;
	margin-left:10px;
	padding-left:10px;
	font-family:'Advent Pro', sans-serif;
	font-weight:100;
	font-size:16px;
	color:#1C1C1C;
	border-left:1px solid #1C1C1C;
}

@media screen and (min-width:768px) {
	.logo {
		float:left;
		margin-left:15px;
		font-family:'Advent Pro', sans-serif;
		font-weight:100;
		color:#1C1C1C;
	}
}

.name {
	float:left;
	margin:5px 10px 0px 10px;
	font-size:37px;
}

.type {
	float:left;
	width:50px;
	margin-top:6px;
	padding:1px 0px 1px 10px;
	font-size:15px;
	border-left:1px solid #1C1C1C;
}

.nav {
	float:right;
	margin:0;
	padding:0;
	list-style:none;
	width:300px;
}

@media screen and (min-width:500px) {
	.nav {
		float:right;
		margin:0;
		padding:0;
		list-style:none;
		width:444px;
	}
}

.nav li {
	float:left;
	padding:16px 10px 13px 10px;
	font-family:'Advent Pro', sans-serif;
	font-weight:200;
	font-size:17px;
	color:#1C1C1C;
}

.nav li:hover {
	border-bottom:2px solid #1C1C1C;
}


@media screen and (min-width:500px) {
	.nav li {
		float:left;
		padding:16px 25px 13px 25px;
		font-family:'Advent Pro', sans-serif;
		font-weight:200;
		font-size:17px;
		color:#1C1C1C;
	}
}

.reposition {
	position:absolute;
	left:50%;
	-webkit-transform: translate(-50%, -0%);
	-moz-transform: translate(-50%, -0%);
}

@media screen and (min-width: 768px) {
	.reposition {
		position:static;
		float:right;
		-webkit-transform: translate(-0%, -0%);
		-moz-transform: translate(-0%, -0%);
	}
}

.navbar-toggle {
	margin-top:13px;
	position:absolute;
	right:0;
}

.collapse {
	height:56px;
	width:100%;
}

.navbar-header {
	float:left;
	display:inline-block;
	height:55px;
	padding:0;
	margin:0;
}

.mainbody {
	width:100%;
	padding:0 0 20px 0;
	margin:0;
	float:left;
}

.slideshow {
	width:100%;
	margin:0;
	padding:0;
}

.fadein {
	width:100%;
	margin:0;
	padding:0;
}

.fadein img {
	width:93.8%;
	height:auto;
	position:absolute;
	left:50%;
	-webkit-transform: translate(-50%, -0%);
	-moz-transform: translate(-50%, -0%);
	margin:0;
	padding:0;
}

@media screen and (min-width: 1110px) {
	.fadein img {
		width:auto;
		height:72.1%;
		position:absolute;
		left:50%;
		-webkit-transform: translate(-50%, -0%);
		-moz-transform: translate(-50%, -0%);
		margin:0;
		padding:0;
	}
}

@media screen and (min-width: 1441px) {
	.fadein img {
		width:72.3%;
		height:auto;
		position:absolute;
		left:50%;
		-webkit-transform: translate(-50%, -0%);
		-moz-transform: translate(-50%, -0%);
		margin:0;
		padding:0;
	}
}

.mainfooter {
	width:100%;
	height:20px;
	position:absolute;
	bottom:0;
	margin:0;
	padding:0;
	float:left;
	position:fixed;
}

.footer {
	position:relative;
	bottom:1px;
	float:right;
	width:100%;
	height:20px;
	padding:0 10px 0 0;
	background-color:#F8F8F8;
	border:1px solid #E7E7E7;
	margin:0;
}

.copyright {
	float:right;
	font-family: 'Advent Pro', sans-serif;
	font-weight: 100;
	font-size:12px;
	margin:0;
	padding:0;
}

@media screen and (min-width: 1441px) {
	.copyright {
		float:right;
		font-family: 'Advent Pro', sans-serif;
		font-weight:200;
		font-size:12px;
		margin:0;
		padding:0;
	}
}

.media li {
	float:left;
	list-style:none;
	position:relative;
	left:10px;
	bottom:2px;
	margin:0 3px 0 3px;
	padding:0;
}

@media only screen and (max-width:480px) {
	.media li {
		display:none;
	}
}

.media {
	padding:0;
	margin:0;
}

<!DOCTYPE html>

<html lang="en">

	<head>
	
	    <title>Tim Corin Wildlife Photography</title>
  		
    	<meta charset="utf-8">
    	<meta name="description" content="Award-winning wildlife, landscape, and event photographer based in Julatten, North Queensland, Australia.">
    	<meta name="keywords" content="wildlife, bird, animal, photo, photography, photographer, camera, julatten, queensland, australia, events, landscape, affordable, cairns, port douglas, mossman">
    	<meta name="viewport" content="width=device-width, initial-scale=1">
    	
    	<link href='https://fonts.googleapis.com/css?family=Poiret+One|Josefin+Slab|Cinzel|Jura:400,300|Nixie+One|Advent+Pro:100,300,200' rel='stylesheet' type='text/css'>
    	<link href="css/bootstrap.min.css" rel="stylesheet">
 	  	<link href="styles.css" rel="stylesheet" type="text/css">
    	
    	<script type="text/javascript" src="jquery.min.js"></script>
		<script type="text/javascript" src="scripts.js"></script>
		<script src="js/bootstrap.min.js"></script>
 		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
		
	</head>
 	 
	<body>
 	
	<div class="maincontainer">
	
	<div class="mainheader">
	
 		<div class="navbar navbar-default">
 		
 			<div class="container">
 		   	
 		   		<div class="navbar-header">
 		   		
					<a href="index.html">
					
						<p class="logo">Tim Corin</p>
						<p class="photography">Wildlife Photography</p>
						
					</a>
			 		
 		   			<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
 		   			
 		   				<span class="sr-only">Toggle navigation</span>
 		   				
 		   				<span class="icon-bar"></span>
 		   				<span class="icon-bar"></span>
 		   				<span class="icon-bar"></span>
 		   				
 		   			</button>
 		   			
 		   		</div>
 		   		
 		   		<div class="collapse navbar-collapse">
 		  		
 		   			<div class="reposition">
 		   			
 		   				<ul class="nav navbar-nav">
 		   			
 		   					<a href=""><li class="home">Home</li></a>
							<a href=""><li class="gallery">Gallery</li></a>
							<a href=""><li>About</li></a>
							<a href=""><li>Contact</li></a>
							<a href=""><li>Blog</li></a>
						
 		   				</ul>
 		   			
 		   			</div>
 		   			
 		   		</div>
 		   		
 		   	</div>
 		   	
 		</div>
 	
 	</div>
 	
 	<div class="mainbody">
 		
		<div class="slideshow">
			
			<div class="fadein">
				
				<img src="images/frog.jpg" />
				<img src="images/sunrays.jpg" />
				<img src="images/beeeater.jpg" />
				<img src="images/sunrise.jpg" />
				<img src="images/darter.jpg" />
				<img src="images/milkyway.jpg" />
			
			</div>
			
		</div>
		
	</div>
	
	<div class="mainfooter">
	
		<div class="footer">
	
			<div class="social">
 		   		
 		   		<ul class="media">
 		   	
 		   			<p class="copyright">Copyright Tim Corin Photography 2016. All Rights Reserved.</p>
 		   		
 		   			<a href="http://www.facebook.com/timcorinphotography" target="_blank"><li class="facebook"><img src="images/facebook.png" height="16px"/></li></a>
 		   			<a href="http://www.instagram.com/timcorinphotography" target="_blank"><li class="instagram"><img src="images/instagram.png" height="16px"/></li></a>
					<a href="http://www.twitter.com/timcorinphoto" target="_blank"><li class="twitter"><img src="images/twitter.png" height="16px"/></li></a>
 		   		
 		   		</ul>
 		   		
 		   	</div>
 		   	
 		</div>
 		   
	</div>
	
	</div>
	
  	</body>
  	
</html>

Answer 1

我认为您没有关闭媒体查询。

@media screen and (min-width: 1110px) {
    .fadein img {
        width:auto;
        height:72.1%;
        position:absolute;
        left:50%;
        -webkit-transform: translate(-50%, -0%);
        -moz-transform: translate(-50%, -0%);
        margin:0;
        padding:0;
    }
    }