無法通過樣式表應用於媒體查詢不同分辨率

所以我試圖讓我的網站的響應是可能的，但對於一些奇怪的原因，我無法替代的樣式表通過媒體查詢應用到我的網頁，供不同的屏幕分辨率。無法通過樣式表應用於媒體查詢不同分辨率

讓我解釋一下，我的主頁是由JavaScript中做然而，當使用較小的分辨率，圖像是太大的幻燈片，所以我想提出一些可供選擇的內容有使用不同的CSS表。我試着在我的其他頁面上做它，它像一個魅力（注意，其他頁面中沒有JavaScript）。我認爲，也許JavaScript代碼阻止加載替代樣式表。更具體地說，我希望幻燈片只顯示在1920x1080分辨率，其他分辨率我想其他內容。對於長期的問題抱歉，我希望我有道理。下面是從我的主頁的HTML：

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width"> 
<meta name="description" content="Affordable and professional web design"> 
    <meta name="keywords" content="web design, affordable web design, 
professional web design"> 
<meta name="author" content="#"> 
<title>Light Designs | Welcome</title> 
<link rel="stylesheet" href="index/index.css"> 
<link rel="stylesheet" media="screen and (max-width: 1366px)" 
href="index/res.css"/> 
<script src="jquery-3.2.1.js"></script> 
<!--<script type="text/javascript"> 
$('body,html').css("overflow","hidden");--> 
</script> 
</head> 
<body> 

<header> 
<div class="container"> 
    <h1 id="logo"><a href="index.html"><img src="index/logo.png" alt="logo"/> 
</a></h1> 
    <nav> 
     <ul> 
     <li class="current"><a href="index.html">home</a> |</li> 
     <li><a href="services.html">services</a> |</li> 
     <li><a href="about.html">about</a></li> 
    </ul> 
    </nav> 
</div> 
</header> 

    <div class="slider"> 
    <ul class="slides"> 
     <li class="slide"><img src="index/showcase.png" alt="#"/></li> 
     <li class="slide"><img src="index/pic4.png" alt="#"/></li> 
     <li class="slide"><img src="index/pic3.png" alt="#"/></li> 
     <li class="slide"><img src="index/pic5.png" alt="#"/></li> 
     <li class="slide"><img src="index/pic4.png" alt="#"/></li> 
    </ul> 
    </div> 

<script type="text/javascript"> 
var myInterval = setInterval(function() { 
    console.log(new Date()); 
}, 1000); 
</script> 

<script type="text/javascript"> 
$(function() { 

    //configuration 
    var width = 1920 
    var animationSpeed = 1000; 
    var pause = 4000; 
    var currentSlide = 1; 

    //cache DOM 
    var $slider = $('.slider'); 
    var $slideContainer = $slider.find('.slides'); 
    var $slides = $slideContainer.find('.slide'); 

    var interval; 

    function startSlider() { 
     interval = setInterval(function() { 
     $slideContainer.animate({'margin-left': '-='+width}, animationSpeed, 
    function(){ 
      currentSlide++; 
      if (currentSlide === $slides.length) { 
      currentSlide = 1; 
      $slideContainer.css('margin-left', 0); 
     } 
    }); 
    }, pause); 
}   
    function stopSlider() { 
     clearInterval(interval); 
    } 

    $slider.on('mouseenter', stopSlider).on('mouseleave', startSlider); 

    startSlider(); 
}); 
</script> 

<section id="newsletter"> 
    <div class="container"> 
    <h1>Subscribe To Our Newsletter</h1> 
    <form> 
     <input class="emailBox_1" type="email" placeholder="Enter Email..."> 
     <button class="button_1" type="submit" class="button_1"> 
    <span>Subscribe</span></button> 
    </form> 
    </div> 
</section> 

<footer> 
    <p>Light designs, Copyright &copy; 2017</p> 
</footer> 
</body> 
</html>

而這裏的CSS

body { 
font: 15px/1.5 Arial, Helvetica,sans-serif; 
padding: 0; 
margin: 0; 
background-color: #0099ff; 
width: 100%; 
} 

/* Global */ 
div.container { 
width: 80%; 
margin: auto; 
overflow: hidden; 
} 

header { 
background: #35424a; 
color: #ffffff; 
padding-top: 0px; 
max-height: 70px; 
height: 50%; 
border-bottom: #0099ff 4.5px solid; 
color: white; 
} 

#logo { 
float: left; 
position: relative; 
bottom: 30px; 
} 

nav { 
float: right; 
position: relative; 
top: 10px; 
right: 60px; 
color: #ffffff; 
text-decoration: none; 
    text-transform: uppercase; 
    font-size: 16px; 
} 

nav li { 
display: inline; 
} 

a { 
color: #ffffff; 
text-decoration: none; 

} 

a:hover { 
color: #0099ff; 
} 

header .current a{ 
color: #0099ff; 
font-weight:bold; 
} 

.slider { 
width: 1920px; 
height: 780px; 
overflow: hidden; 
} 

.slider .slides { 
display: block; 
width: 9600px; 
height: 780px; 
margin: 0; 
padding: 0; 
} 

.slider .slide { 
float: left; 
list-style-type: none; 
width: 1920px; 
height: 780px; 
} 

#newsletter{ 
position: relative; 
bottom: 10px; 
color: #ffffff; 
background: #35424a; 
} 

#newsletter form { 
float:right; 
margin-top: 7px; 
position: relative; 
bottom: 8px; 
} 

#newsletter h1{ 
margin-bottom: 0px; 
float:left; 
position: relative; 
bottom: 5px; 
} 

#newsletter input[type="email"]{ 
padding:4px; 
height:25px; 
width:250px; 
} 


.button_1 { 
display: inline-block; 
border-radius: 4px; 
background-color: #0099ff; 
border: none; 
color: #FFFFFF; 
line-height: 4px; 
font-size: 20px; 
padding: 20px; 
padding-top: 18px; 
padding-bottom: -2; 
width: 150px; 
height: 30px; 
transition: all 1s; 
cursor: pointer; 
margin: 5px; 
position: relative; 
top: 4px; 
} 

.button_1 span { 
cursor: pointer; 
display: inline-block; 
position: relative; 
transition: 0.5s; 
} 

.button_1 span:after { 
content: '\00bb'; 
position: absolute; 
opacity: 0; 
top: 0; 
right: -20px; 
transition: 0.5s; 
} 

.button_1:hover span { 
padding-right: 25px; 
} 

.button_1:hover span:after { 
opacity: 1; 
right: 0; 
} 

footer{ 
background-color:#0099ff; 
color: #ffffff; 
text-align: center; 
padding: 10px; 
margin-top: 0; 
position: relative; 
bottom: 10px; 
height: 20px; 
    } 

footer p { 
position: relative; 
bottom: 6px; 
}

來源

2017-05-25 Stefan Vujic

使用<元名稱=「視口」內容=「寬度=設備寬度，初始規模= 1」> – mlegg

雖然目前沒有出現任何代碼，以確定用戶的屏幕大小，除非我錯過了。 –

鏈接標記後'*'的用途是什麼？ – Angrysheep

你可以使用一個媒體查詢（將其置於.slider後）隱藏滑塊容器：

@media (max-width: 1919px) { 
    .slider { 
    display:none; 
    } 
}

來源

2017-05-25 03:49:13 itacode

雖然我可以發誓，但我早些時候嘗試過，但沒有奏效。重要的是，它現在起作用了，非常感謝你。 –

不客氣。正如它的工作，你可以選擇或投票這個答案... – itacode

無法通過樣式表應用於媒體查詢不同分辨率

回答

相關問題