Question

所以我有这个非常奇怪的问题。当我在本地测试它时，我的媒体查询工作得很好，但是，当我将文件上传到我的网站时，服务器似乎没有注意到媒体查询，它注意到其中一个是第一个但是那些对于智能手机，它只是跳过并显示我为所有屏幕尺寸隐藏的所有元素。我确定他们是正确的，因为他们在本地工作。无论如何，这里是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;
}   

}

Answer 1

你可以尝试像这样放置移动css前置电脑css：

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

Answer 2

所以我终于弄明白了，我的用户可扩展性设置为no，我只是将其设置为yes并在我的浏览器中删除了临时文件并且它工作得很好。

<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">

媒体查询在本地工作但在上传到网站时没有

2 个答案: