媒體查詢本地工作，但不上傳到網站

所以我有這個奇怪的問題。當我在本地測試時，我的媒體查詢工作得很好，但是，當我將文件上傳到我的網站時，服務器似乎沒有注意到媒體查詢，它注意到其中一個是第一個，但是智能手機，它只是跳過並顯示我爲所有屏幕尺寸隱藏的所有元素。我確定他們是正確的，因爲他們在當地工作。無論如何，這是HTML和CSS。媒體查詢本地工作，但不上傳到網站

<meta name="viewport" content="width=device-width"> 

<header> 
<div class="container"> 
    <h1 id="logo"><a href="index.html"><img src="index/logo.png" alt="logo"/></a></h1> 
<div class="dropdown"> 
    <img src="index/mobilemenubutton.png" id="menubutton"> 
<div class="dropdown-content"> 
    <ul id="nobullets"> 
    <li class="center"><a href="index.html">Home</a></li> 
    <li class="center"><a href="about.html">About</a></li> 
    <li class="center"><a href="services.html">Services</a></li> 
    </ul> 
</div> 
</div> 







    #container_2, #navi, #infoi, #smartphone_main_col, .dropdown, .dropdown- 
    content { 
    display: none; 
    } 

@media screen /*THIS ONE WORKS*/ 
and (max-width: 1367px) { 
.slider { 
    display: none; 
} 
.fader { 
    display: block; 
} 
#navi, #infoi { 
    position: absolute; 
    display: block; 
    width: 100%; 
    height: 100%; 
    top: 0; 
    left: 0; 
} 

#infoi { 
    z-index: 1; 
    transition: 2s; 
} 

#infoi:hover { 
    opacity: 0; 
} 

#container_2 { 
    position: relative; 
    width: 100%; 
    height: 100%; 
    display: block; 
} 

#other_f { 
    position: relative; 
    top: 650px; 
} 

#newsletter { 
    z-index: 3; 
} 

.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: 3.3px; 
} 

footer { 
    z-index: 2; 
    position: relative; 
    bottom: 0; 
    width:100%; 
    height:40px; 
} 
} 

/* Smartphones (portrait and landscape) ---------- */ /*THIS ONE DOESN'T WORK*/ 
    @media screen and (min-width: 320px) and (max-width: 480px){ 
    .slider, .slides, .slide, #infoi, #navi, footer { 
    display: none; 
} 

#background { 
    background-color: #d2d8d0; 
} 

.container { 
    width: 100%; 
    margin: auto; 
    overflow: hidden; 
    padding-right: 0; 
} 

header { 
    position: fixed; 
    top: 0; 
    width: 100%; 
    border-bottom: #0099ff 4px solid; 
} 

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

.dropdown { 
    position: absolute; 
    display: inline-block; 
    padding: 0; 
    margin: 0; 
} 

#menubutton { 
    position: relative; 
    width: 70px; 
    height: 70px; 
    left: 30px; 
} 

#nobullets { 
    list-style-type: none; 
} 

.center { 
    padding: 10px 20px 10px 0px; 
} 

.center:hover { 
    background-color: #ffffff; 
} 

.dropdown-content { 
    display: none; 
    position: relative; 
    right: 20px; 
    color: black; 
    background-color: #35424a; 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
    z-index: 1; 
    margin: 0; 
    bottom: 100px; 
    right: 80px; 
    padding: 0; 
} 

.dropdown:hover .dropdown-content { 
    display: block; 
} 

.link-1 { 
    display: none; 
} 

#smartphone_main_col { 
    display: block; 
    padding-left: 40px; 
    padding-right: 40px; 
    padding-top: 80px; 
} 

#newsletter { 
    height: 80px; 
    position: fixed; 
    bottom: 0; 
    padding-top: 0; 
    padding-right: 0; 
} 

#newsletterhead { 
    font-size: 20px; 
    position: relative; 
    top: -12px; 
    left: 34px; 
} 

#newsletter input[type="email"] { 
    padding: 4px; 
    height: 23px; 
    width: 185px; 
    transition: 1s; 
    position: relative; 
    bottom: 10px; 
    right: 35px; 
    float: left; 
} 
.button_1 { 
    display: inline-block; 
    border-radius: 0px; 
    background-color: #0099ff; 
    border: none; 
    color: #FFFFFF; 
    line-height: 4px; 
    font-size: 20px; 
    padding: 18px; 
    padding-bottom: -12px; 
    width: 120px; 
    height: 7px; 
    transition: all 1s; 
    cursor: pointer; 
    margin: 5px; 
    position: relative; 
    top: -16px; 
    right: 35px; 
} 

}

來源

2017-07-25 Stefan Vujic

一個右括號中缺少你的第二個媒體查詢 – fen1x

納阿，我離開它錯誤地複製代碼時，一切都運行在本地的罰款。 –

您嘗試使用的手機是否適用於這些css查詢？意味着他的屏幕寬度在320PX和480PX之間？嘗試刪除最大寬度，看看它是否有效，如果是這樣，那就是你的問題所在。 – meame69

你可以嘗試的地方移動CSS前PC的CSS是這樣的：

@media screen and (min-width: 320px) and (max-width: 480px){...} 
@media screen and (max-width: 1320px){...}

來源

2017-07-26 03:54:58

所以，我終於想出的傢伙，我的用戶的可擴展性設置爲無，我只是將它設置爲是的，並刪除我的瀏覽器中的臨時文件，它工作得很好。

<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width"> 
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user- 
    scalable=yes"> <!--THIS--> 
<meta name="description" content="Affordable and professional web design"> 
    <meta name="keywords" content="web design, affordable web design, 
professional web design, portfolio"> 
<meta name="author" content="Stefan Vujic"> 
<title>Light Designs | Welcome</title> 
<link rel="stylesheet" href="css/style.css"> 
<link rel="icon" href="favicon.png"> 
<script src="jquery-3.2.1.js"></script> 
<script type="text/javascript">

來源

2017-07-26 13:29:16

媒體查詢本地工作，但不上傳到網站

回答

相關問題