Media Queries et dimensions décran

**Neelix57** · 10/07/2023, 14h07

Bonjour,

Je débute dans l'utilisation des Media Queries.

Je développe un site web en utilisant la méthode "Mobile First".

Seulement voilà, j'ai du mal à comprendre le principe.

Voici un bout de code:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.newsImg {
	width: 50%;	
	margin-left: auto;
	margin-right: auto;
}
 
@media only screen and (min-width: 768px) {
	.newsImg img {
		width: 30%;
	}
}
@media only screen and (min-width: 992px) {
	.newsImg img {
		width: 10%;
	}
}

En principe, cela signifie que la largeur de mon image sera de 10% sur un écran de largeur supérieure ou égale à 992px, 30% sur un écran de largeur supérieure ou égale à 768px et 50% sur les écrans plus petits.

Hors, dans mon CSS, je me retrouve avec une largeur de 30% (pour écran supérieur ou égal à 768px), pour un écran de 375x667.

Quelqu'un peut-il, s'il vous plaît me venir en aide et m'expliquer ceci plus clairement ?

**NoSmoking** · 10/07/2023, 16h06

Bonjour,
attention aux sélecteurs, d'un côté tu mets :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
.newsImg {
}

et de l'autre :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
.newsImg img {
}

**Neelix57** · 10/07/2023, 16h22

C'est une erreur lorsque j'ai copié collé le fragment de code. J'ai fait une mauvaise sélection.

**NoSmoking** · 11/07/2023, 18h46

Pour commencer ce CSS est suffisant de nos jours :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
ton-selecteur {
  width: 50%;
  margin-right: auto;
  margin-left: auto;
}
@media (min-width:768px) {
  ton-selecteur {
    width: 30%;
  }
}
@media (min-width:992px) {
  ton-selecteur {
    width: 10%;
  }
}

... ensuite as-tu dans ta <head></head>la meta suivante :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

par contre en relisant j'ai du mal à comprendre ta remarque :

Hors, dans mon CSS, je me retrouve avec une largeur de 30% (pour écran supérieur ou égal à 768px), pour un écran de 375x667.

Je rajoute ce lien vers une autre discussion : c'est sur ce post

Media Queries et dimensions décran

Dimensionnement en CSS

Discussions similaires

Partager

Partager