我的媒体查询已停止工作,我不知道为什么。他们昨天工作正常。我认为存在冲突,但不知道在哪里。我将非常感谢您的帮助!
目前支持的解决方案: 1024×768 1280×720 1440 1600×900 1920×1080
现场演示:http://dev.studiowonderland.pl/demo/index.html
@EDIT - 当文件在服务器上时,一切正常。在当地它没有工作......
CSS:
.logo {
background: url('../img/logo.png')no-repeat;
width: 600px;
height: 188px;
position: absolute;
margin-left: auto;
margin-right: auto;
top: 3%;
left: 0;
right: 0;
}
.doors {
background: url('../img/doors.png') no-repeat;
position: absolute;
top: 50%;
left: 50%;
width: 1000px;
height: 667px;
margin-top: -275.5px;
margin-left: -525px;
}
#user_go {
position: absolute;
top: 50%;
left: 50%;
margin-top: -275.5px;
margin-left: -525px;
}
.ramka {
background: url('../img/ramka.png') no-repeat;
position: absolute;
top: 50%;
right: 10%;
width: 394px;
height: 700px;
margin-top: -350px;
}
.menu {
position: absolute;
bottom: 0;
left: 10%;
}
以下是媒体查询的示例:
@media screen and (max-width: 1440px) and (max-height: 900px) and (min-height:300px) {
.ramka, .doors, .logo, .belka {
background-size: 85% 85% ;
}
.menu {
top: 125px;
left: 7%;
}
.doors {
margin-top: -225.5px !important;
margin-left: -475px;
}
.ramka {
margin-top: -250px !important;
margin-right: -75px;
}
ul.nawigacja {
list-style: none;
padding-top: 30px;
}
ul.nawigacja li {
margin: 40px 10px;
}
ul.nawigacja li:nth-child(1) {
margin-right: 65px;
}
ul.nawigacja li:nth-child(2) {
margin-right: 175px;
margin-top: 45px;
}
ul.nawigacja li:nth-child(3) {
margin-left: 15px;
margin-top: -15px;
}
ul.nawigacja li:nth-child(4) {
margin-top: 10px;
margin-right: 105px;
}
ul.nawigacja li:nth-child(5) {
margin-top: 60px;
margin-left: -15px;
}
ul.nawigacja li a{
font-size: 2em;
}
}
还有JS:
$(document).ready(function(){
// Cookies do Dialogu //
if ($.cookie("dismiss") == null) {
$('#myModal').appendTo("body");
function show_modal(){
$('#myModal').modal();
}
window.setTimeout(show_modal, 500);
}
$(".dismiss").click(function() {
document.cookie = "dismiss=true; expires=Fri, 31 Dec 9999 23:59:59 UTC";
});
// Smooth Scrolling //
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
// OBRAZEK NA DRZWIACH //
$('.doors').hover(function(){
$(this).after(' <img id="user_go" src="img/logo2.png" />');
},function () {
$("#user_go").remove();
});
});