Dev Faq
0
votes

Les requêtes multimédias que j'utilise ne rendent pas mon application réactive?

Je suis en train de créer une application météo assez simple. J'essaie de rendre l'application mobile réactive. Cependant, les requêtes multimédias que j'ajoute ne redimensionnent pas l'application lorsque l'écran est plus petit.

HTML:

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

CSS:

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

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

Je sais que si je fixe une largeur maximale, il devrait cibler tous les écrans en dessous de cette taille. Cependant, la seule chose qui change vraiment, c'est la largeur du corps. J'ai également envisagé de régler la «marge» pour «# weather_Wrapper» et «.WeatherCard »à 0. Cependant, cela n'a pas fonctionné.

Y a-t-il quelque chose qui me manque?

0 commentaires

3 Réponses :

2
votes

Vous devez écrire la partie avec les requêtes multimédias après les autres règles CSS (en bas), sinon les règles régulières remplaceront les requêtes multimédias, simplement parce qu'elles suivent après et sont toujours valables pour les sélecteurs qu'ils contiennent dans toutes tailles.

2 commentaires

Oh, c'est un excellent point. Je suis allé de l'avant et l'ai mis à jour vers le bas. Cependant, cela me fait toujours défiler horizontalement.

Eh bien, vous utilisez des largeurs fixes (c'est-à-dire des valeurs de pixels fixes) pour beaucoup de vos éléments (par exemple #weather_wrapper ), qui ne rentreront pas dans des écrans plus petits. En général, vous devez utiliser des valeurs de pourcentage et des paramètres max-width à la place (cela dépend toujours de la situation particulière, mais à titre indicatif).

0
votes

Vous n'avez pas besoin de requêtes multimédias pour atteindre votre objectif. Tout d'abord, vous devez ajouter la hauteur aux balises html et body comme ceci: 

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

Et deuxièmement, vous ne devez pas utiliser fixe marges du tout. essayez de remplacer le #wheater_wrapper id par ceci: 

html,body {
  height: 100%;
}

L'affichage flex créera un conteneur flex qui s'adaptera à n'importe quelle largeur d'appareil et le justify-content-center sera centré horizontalement et l'alignement-items-center sera centré verticalement (c'est la raison pour laquelle nous définissons la hauteur des balises html et body à 100%).

Faites-moi savoir si vous avez des doutes ou des problèmes avec cette approche.

0 commentaires
0
votes

Je vois que vous n'avez pas supprimé votre marge gauche lorsque vous répondez et que vous devez suivre la spécificité css. Pour plus de détails sur la spécificité css

Voir les didacticiels de spécificité css w3schools

vous avez utilisé votre média qui ne suit pas la spécificité,

vous pouvez également essayer d'utiliser ! important cela fonctionnera très bien.

voir l'extrait ci-dessous. 

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

0 commentaires

Articles qui pourrait vous intéresser :

Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO
Select2 ne s'affiche pas correctement dans le mode bootstrap
Le bootstrap de Twitter a-t-il des classes utilitaires de taille de police?
Comment puis-je définir un format pour les nombres d'entrée dans Blazor