1486 sujets

Web Mobile et responsive web design

Premier essai en RWD

Voilà mon premier test en RWD (il faut bien un début). J'ai 2 blocs, un pour le logo et un pour une bannière.
Quand je rétrécie le navigateur pour obtenir une largeur <= 500px, tout se passe bien, mais j'ai l'impression qu'il y a une marge résiduelle à gauche du bloc logo. Et pour terminer, dois-je indiquer une nouvelle taille au 'container' lié à la taille de ma fenêtre de navigateur (500px).
Merci...

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document sans nom</title>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style type="text/css">
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	background-color: #CCC;
}

.container {
	display: flex;
	width: 1100px;
	margin-right: auto;
	margin-left: auto;
	flex-wrap: nowrap;
}
.logo {
	background-color: #F00;
	width: 400px;
}
.banniere {
	background-color: #0F0;
	width: 700px;
}

@media screen and (max-width: 500px){
	.container {
	width: 500px;
	flex-wrap: nowrap;
	justify-content: center;
	background-color: #FF0;
	}
	
	.banniere {
		display:none;
	}
	
	.logo {
		max-width: 100%;
		height:auto;
}
}


</style>
</head>

<body>
<div class="container">
  <div class="logo">LOGO</div><!-- logo -->
  <div class="banniere">BANNIERE</div><!-- banniere -->
</div><!-- container -->
</body>
</html>
Modérateur
Et l'eau,

Tu indiques des valeurs figées. Or en responsive, c'est erreur grossière. En responsive, la plupart des éléments (voir tous les éléments) doivent être fluides.
Bonjour,

Pas nécessairement en pourcentage (qui est relatif à la taille du parent) Luxojr mais absolument en une unité relative telle que le rem/em (relative à la taille de police) ou en vm/vw (relatif à taille de la zone d'affichage). L'important étant de ne plus raisonner en terme de taille mais de proportion.

Ensuite libre à toi de fixer des limites pour limiter l'empreinte de certains éléments ou de la page mais en ce cas, il faudra préférer l'utilisation de max-width/height en lieu et place width/height.

Concrètement pour .container j'enlèverais les width et ajouterais simplement max-width: 1100px.
Merci pour ces informations, mais j'ai une autre question.
Quand je réduis ma page pour atteindre le break-point de 500px dans mon exemple. L'image de mon logo dois-t-elle rester intègre (conserver sa taille) ou diminuer en s'adaptant à la taille finale. C'est une question un peu bête, mais je la pose quand même.
Merci.
et généralement sur les petits résolutions, comme ici inférieur à 500, tu laisses la taille de ton container en auto.

Tu peux t'inspirer d'exemple existant comme celui de bootstrap :

<576px : 100%
?576px : 540px
?768px : 720px
?992px : 960px
?1200px : 1140px
luxojr a écrit :
Merci pour ces informations, mais j'ai une autre question.
Quand je réduis ma page pour atteindre le break-point de 500px dans mon exemple. L'image de mon logo dois-t-elle rester intègre (conserver sa taille) ou diminuer en s'adaptant à la taille finale. C'est une question un peu bête, mais je la pose quand même.
Merci.

A vous de voir de l'effet recherché.
Perso je préfère une image adaptative et lui appliquer des bornes maximales et minimales pour ses dimensions. 400px de large sur un device <500px c'est pas un peu trop selon toi ? D'autant qu'avaec les émargements et espacements, vous risquez fort d'avoir des déconvenues. De la réponse à cette question doit découler le comportement à donner à l'image.
Sujet clos
Aller à