@media查询以奇怪的方式工作
@media query working in a strange way
圣诞节期间，我暂停了网站的工作。本周我回到它，发现代码以某种方式被更改了。我已经包含了所有代码，但我想解决的主要部分是 css .fadein，特别是下面的代码片段。
@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>我认为
您没有关闭媒体查询。
@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;
}
}
相关文章：
- 鼠标输入鼠标离开没有按照我认为应该的方式工作
- 针对移动设备的JQuery下拉列表没有以应有的方式工作
- 多行工具提示无法以编程方式工作
- 拼接没有按照我预期的方式工作
- 为什么需要 CDATA，而不是在任何地方都以相同的方式工作
- Javascript hide/show 切换在 Opera 中是双向的，但在其他浏览器中只能以一种方式工作
- 为什么这个正则表达式不能按照我想要的方式工作
- blur(） 无法以编程方式工作 |但在从用户启动时会这样做
- jquery调整大小函数没有按照我期望的方式工作
- Javascript:逗号运算符，var，以及为什么它以这种方式工作
- @media查询以奇怪的方式工作
- 无法让 append(） 以正确的方式工作
- AngularJS - CSS 动画只能以一种方式工作
- JavaScript parentnode.id 没有按照我预期的方式工作
- Packery - jquery show/hide有效，但不能以其他方式工作
- .filter(） 中的函数没有按我想要的方式工作
- 如何实现 emit 以同步方式工作
- javascript对象声明没有按我希望的方式工作
- 我的查询获胜'因为一个剧本，它不能工作(它以错误的方式工作）！?但为什么呢?SESSIONS和PHP
- html5本地存储没有按我想要的方式工作
