Discussion :

[X-Girl]

Bonjour tout le monde

Je n'arrive pas à faire les médias queries pour l'écran 320 et 768 px.
Ca ne prend pas en compte ca prend en compte que la largent de l'écran 1024. pourquoi il ne prend pas en compte ?
merci d'avance

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
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
@media only screen and(max-width: 768px)
{
	figure{
		width: 50% !important; 
	}
 
	footer{
	margin-top: 10em; 
	}
}
@media screen and(max-width: 320px)
{
	figure{
		width: 75% !important; 
	}
 
	footer{
	margin-top: 20em; 	
	}
}
@media only screen and (max-width: 1024px)
{
	nav
	{
		width: auto; 
		text-align: left; 
	}
 
	nav ul
	{
		flex-direction: column; 
	}
 
	nav li
	{
		padding-left: 4px; 
	}
 
	nav a
	{
		font-size: 1.1em; 
	}
 
	nav a:hover
	{
		border-bottom: 0; 
	}
 
	#slideshow
	{
		display: none; 
	}
	#textslider
	{
		display:none; 
	}
	.picture
	{
		display:none; 
	}
	.projets_album {
    flex-direction: column; 
	justify-content: center; 
	align-items: center; 
	}
	iframe{
		display: none; 
	}
	#arriere_plan{
		display: none; 
	}
 
	figure {
	width: 35%; 
    }
 
	p{
		font-size: 100%; 
		font-family:  Arial, Verdana, sans-serif; 
	}
 
	#formulaire{
	background-color: rgba(52, 145, 178, 0.40); 
	}
 
 
	#conteneur_contact{
	width:60%; 
    margin-left:20%; 
 
	}
}

[psychadelic]

les média query sont basés sur l'info fournie par le navigateur,
que ce soit sur iOs ou Android, un écran de 320 pixels réels est considéré comme ayant 480 pixels relatifs.

compte tenu du fait que les écrans de smartphones sont souvent en haute définition, ce qui maintenant dépasse les 300ppi des premiers écrans rétina ; et que le logiciel d'affichage y va automatiquement de ses interpolations.

si tu veux utiliser les média query pour les smartphones tu peux utiliser
max-device-width et min-device-width
qui te donneron la "vraie résolution"
(par exemple 2436-by-1125-pixel resolution at 458 ppi pour un iPhone X Super Retina HD display => https://www.apple.com/iphone/compare/ )

il peut aussi être utile de raisonner en terme de ratio d'affichage ( device-aspect-ratio. )

ou d'utiliser les mesures en vh et vw pour tes blocks plutôt que de px. (Viewport units: vw, vh, vmin, vmax )



mais perso j’espère que le w3c va aller faire le ménage sur ces questions , car chaque constructeur y va de son délire sur cette gestion d'affichage et on se retrouve à de voir faire du code au cas par cas comme avant ou il fallait prévoir son code pour ie5 ou mozilla.

ce qui peut aider...
https://css-tricks.com/snippets/css/...ndard-devices/
https://andrew.hedges.name/experiments/aspect_ratio/

et j'ai retrouvé ça, aussi (apres avoir rédigé, car je savais bien que mes liens bookmarkés précédement venaient de qq part p

https://stackoverflow.com/questions/...ss-media-query

[X-Girl]

et pour 768 pixel ?

[psychadelic]

- Est- que tu à bien placé en tête de page la balise meta pour prévenir le navigateur que tu utilise la technique des média-query ??

- Est-ce que cette commande lui indique bien de ce mettre à l'échelle 1 ?

- Est-ce que tu à fait un script pour te renvoyer les dimension de ton média au moment du chargement, histoire d'avoir des élément concrets pour débugger ton histoire ?

- Est-ce que ton css ne se plante pas sur une ligne précédente de tes commandes de média query, ce qui ferait qu'elles deviendrait alors ignorées ?

- Est-ce qu'il s'agit bien d'un probleme uniquement sur smarphone comme je l'ai supposé ? et est-ce que ce probleme surfien aussi sur unécran de PC ?

- Est-ce que tu a un message d'erreur dans la console du debugger et dans ce cas quel est-il ?

- Est-ce qu'il y a un conflit entres différents scripts css ? comme par exemple si tu utilise un framework css ?

[DMC]

Bonjour,

Je suis pas un expert des MQ mais des fois on oublie de mettre la meta viewport dans le header

Code :

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

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

[Invité]

Bonjour,

ATTENTION à l'ordre dans lequel tu donnes les instructions !

1- Actuellement, tu as :

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
@media only screen and(max-width: 768px)
{
...
}
@media screen and(max-width: 320px)
{
...
}
@media only screen and (max-width: 1024px)
{
...
}

Avec max-width: 1024px en dernier, TOUT ce qui est AVANT (concernant les mêmes sélecteurs/instructions) est écrasé !

2- SOLUTION :
Il faut mettre dans cet ordre :

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
@media only screen and (max-width: 1024px)
{
...
}
@media only screen and (max-width: 768px)
{
...
}
@media screen and (max-width: 320px)
{
...
}

On peut aussi définir des intervalles : du coup, l'ordre importe peu, puisqu'ils ne se chevauchent plus

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
@media only screen and (min-width: 769px) and (max-width: 1024px)
{
...
}
@media only screen and (min-width: 321px) and (max-width: 768px)
{
...
}
@media screen and (max-width: 320px)
{
...
}

3- A CONTRARIO, si tu définis pour "min-width" seul, il faut inverser l'ordre :

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
@media screen and (min-width: 321px)
{
...
}
@media only screen and (min-width: 769px)
{
...
}
@media only screen and (min-width: 1025px){
...
}

4- A SAVOIR que pour :

• PHONE, on prendra plutôt 640px (au lieu de 320px)
• TABLET, on prendra de 641px à 1023px
• DESKTOP, à partir 1024px

Mais rien n'empêche d'avoir d'autres "breakpoints".