我正在使用的媒体查询不会使我的应用程序响应？答案

【问题标题】：The Media Queries That I am Using Do Not Make My App Responsive?我正在使用的媒体查询不会使我的应用程序响应？
【发布时间】：2020-02-05 09:18:25
【问题描述】：

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

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 小提琴：https://jsfiddle.net/hpsfj653/

我知道如果我设置了最大宽度，那么它应该针对低于该尺寸的所有屏幕。然而，唯一真正改变的是身体宽度。我还考虑将 '#weather_Wrapper' 和 '.WeatherCard' 的 'margin' 设置为 0。但是，这不起作用。

我有什么遗漏的吗？

【问题讨论】：

标签： html css media-queries

【解决方案1】：

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

【讨论】：

哦，这很好。我继续并将其更新到底部。但是，它仍然让我水平滚动。
好吧，您的许多元素（例如#weather_wrapper）使用了固定宽度（即固定像素值），这不适合较小的屏幕。通常，您应该使用百分比值和max-width 设置来代替（始终取决于特定情况，但作为一般准则）。

【解决方案2】：

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

See w3schools css specificity tutorials

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

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

请参阅下面的 sn-p。

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

【讨论】：

【解决方案3】：

您不需要媒体查询来实现您的目标。首先，您应该像这样为 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%)。

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

【讨论】：