我正在使用的媒体查询不会使我的应用响应？

Question

我正在构建一个非常简单的天气应用程序。我正在尝试使该应用程序具有移动响应能力。但是，当屏幕较小时，我添加的媒体查询不会调整应用程序的大小。

HTML:

<body>
    <div id="weather_wrapper">
    <div class="weatherCard">

      <div class="currentTemp">
        <p class = "help">Click on the temp to change units</p> 
        <p class="location"></p>
            <p class="temp"></p>
        </div>


      <div class="currentWeather">
        <span class = "weather-description"></span>
        <span class="conditions"></span>
            <div class="info">
                <span class="rain"></span>
                <span class="wind"></span>
            </div>
        </div>

    </div>
  </div>




    <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
    <script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>
    <script src="app.js"></script>
  </body>

CSS:

@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,700);
@import url(https://cdnjs.cloudflare.com/ajax/libs/weather-icons/1.2/css/weather-icons.min.css);


@media screen and (max-width: 350px) {
    body{
        width: 300px;
        height: 150px
    }
    #weather_wrapper{
        width: 300px;
    }
    .weatherCard{
        width: 300px;
    }

}

body{
background: linear-gradient(90deg, #7474BF 10%, #348AC7 90%);
font-family: 'Open Sans';
}

#weather_wrapper{
    width: 500px;
    margin-left: 450px;
  margin-top: 150px;
}
.weatherCard{
    width: 400px;
    height: 200px;
    font-family: 'Open Sans';
    position: relative;
}
.currentTemp{
    width: 220px;
    height: 200px;
    background: rgb(41, 41, 41);
  color: rgb(255, 255, 255);
  position: absolute;
}
.temp:hover{
    text-decoration: underline;
    cursor: pointer;
}
.currentWeather{
    width: 180px;
    height: 200px;
    background: rgb(237, 237, 237);
    margin: 0;
  position: absolute;
    top: 0;
    right: 0;
}
.help{
    font-size: 15px;
    text-align: center;
    top: 15px;
    position: absolute;
    color: rgb(255, 255, 255);
}
.info{
  background: rgb(42, 178, 234);
  position: absolute;
  bottom: 0;
  right: 0;
  width: 180px;
  height: 50px;
}
.temp{
    width: 100px;
    height: 50px;
    margin-top: 110px;
    margin-left: 80px;
    position: absolute;
    color: rgb(255, 255, 255);
}
.location{
    width: 120px;
    height: 30px;
    margin-top: 80px;
    margin-left: 80px;
    position: absolute;
    color: rgb(237, 237, 237)
}
.conditions{
    width: 100px;
    height: 30px;
    margin-top: 40px;
    margin-left: 60px;
    position: absolute;
}
.weather-description{
    margin-left: 59px;
    margin-top: 30px;
    margin-bottom: 50px;
    position: absolute;
}

.wind {
    width: 100%;
    margin-left: 30px;
    position: relative;
    font-size: 14px;
  }

  .wind::after {
    display: block;
    content: '\f050';
    font-family: weathericons;
    font-size: 25px;
    margin-left: 75px;
    position: absolute;
    bottom: -26px;
  }

JS Fiddle: https://jsfiddle.net/hpsfj653/

我知道，如果我设置了最大宽度，那么它应该针对小于该尺寸的所有屏幕。然而，唯一真正改变的是车身宽度。我还考虑过将“#weather_Wrapper”和“.WeatherCard”的“边距”设置为 0。但是，这没有用。

有什么我遗漏的吗？

Answer 1

您应该在其他 CSS 规则（底部）之后编写媒体查询部分 ，否则常规规则将覆盖媒体查询，只需因为它们在之后它们之后，并且对于它们包含在所有尺寸中的选择器仍然有效。

Answer 2

您不需要媒体查询来实现您的目标。首先，您应该将高度添加到 html 和 body 标签，如下所示：

html,body {
  height: 100%;
}

其次，您根本不应该使用固定边距。尝试用这个替换 #wheater_wrapper id:

#weather_wrapper{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

display flex 将创建一个适应任何设备宽度的 flex 容器，justify-content-center 将水平居中，align-items-center 将垂直居中（这就是我们设置 html 和 body 标签高度 100%).

如果您对这种方法有任何疑问或问题，请告诉我。

Answer 3

我看到您在响应时没有删除左边距，您应该遵循 css 特异性。有关 css 特异性的更多详细信息

See w3schools css specificity tutorials

您使用的媒体不符合特异性，

您也可以尝试使用 !important 它会正常工作。

请参阅下面的代码段。

@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,700);
@import url(https://cdnjs.cloudflare.com/ajax/libs/weather-icons/1.2/css/weather-icons.min.css);




body{
background: linear-gradient(90deg, #7474BF 10%, #348AC7 90%);
font-family: 'Open Sans';
}

  
  @media screen and (max-width: 350px) {
  
 body{
  width: 300px!important;
  height: 150px!important;
 }
 #weather_wrapper{
  width: 100%!important;
    margin-left: 0px!important;
   
 }
 .weatherCard{
  width: 100%!important;
 }

}


#weather_wrapper{
 width: 500px;
 margin-left: 450px;
  margin-top: 150px;
}
.weatherCard{
 width: 400px;
 height: 200px;
 font-family: 'Open Sans';
 position: relative;
}
.currentTemp{
 width: 220px;
 height: 200px;
 background: rgb(41, 41, 41);
  color: rgb(255, 255, 255);
  position: absolute;
}
.temp:hover{
 text-decoration: underline;
 cursor: pointer;
}
.currentWeather{
 width: 180px;
 height: 200px;
 background: rgb(237, 237, 237);
 margin: 0;
  position: absolute;
 top: 0;
 right: 0;
}
.help{
 font-size: 15px;
 text-align: center;
 top: 15px;
 position: absolute;
 color: rgb(255, 255, 255);
}
.info{
  background: rgb(42, 178, 234);
  position: absolute;
  bottom: 0;
  right: 0;
  width: 180px;
  height: 50px;
}
.temp{
 width: 100px;
 height: 50px;
 margin-top: 110px;
 margin-left: 80px;
 position: absolute;
 color: rgb(255, 255, 255);
}
.location{
 width: 120px;
 height: 30px;
 margin-top: 80px;
 margin-left: 80px;
 position: absolute;
 color: rgb(237, 237, 237)
}
.conditions{
 width: 100px;
 height: 30px;
 margin-top: 40px;
 margin-left: 60px;
 position: absolute;
}
.weather-description{
 margin-left: 59px;
 margin-top: 30px;
 margin-bottom: 50px;
 position: absolute;
}

.wind {
 width: 100%;
 margin-left: 30px;
 position: relative;
 font-size: 14px;
  }

  .wind::after {
 display: block;
 content: '\f050';
 font-family: weathericons;
 font-size: 25px;
 margin-left: 75px;
 position: absolute;
 bottom: -26px;
  }

  <body id="body">
    <div id="weather_wrapper">
   <div class="weatherCard">

      <div class="currentTemp">
        <p class = "help">Click on the temp to change units</p> 
        <p class="location"></p>
     <p class="temp"></p>
    </div>
      

      <div class="currentWeather">
        <span class = "weather-description"></span>
        <span class="conditions"></span>
     <div class="info">
      <span class="rain"></span>
      <span class="wind"></span>
     </div>
        </div>

    </div>
  </div>




    <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
    <script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>
    <script src="app.js"></script>
  </body>

我正在使用的媒体查询不会使我的应用响应？

The Media Queries That I am Using Do Not Make My App Responsive?

html

css

media-queries