[@media] Ordre dans le CSS - soucis utilisation mixte de px / %

**ddaweb** · 26/02/2023, 20h31

Bonsoir,

J'ai une question d'ordre pratique sur le fichier CSS.
A cause du mélange de px et % sur une ligne (ce qui fout le bordel), j'ai du ajouter un @media pour les petits GSM avec un petit réglage typique.

Je me demande si je les ai bien mis dans le bon ordre, même si tout semble fonctionner correctement :

Code :

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

1
2
3
4
5
6
7
8
@media print { }
@media(max-width:767px){  /* ----- GSM */ }
@media(max-width:360px){  /* ----- Petit GSM */ }
@media(min-width:768px){  /* ----- Tablette */ }
@media(min-width:992px){  /* ----- Portables */ }
@media(min-width:1601px){  /* ----- PC */ }
@media(min-width:1921px){  /* ----- PC grand écran*/ }
@media(prefers-color-scheme: dark) {  /* ----- Thème sombre */ }

Cela concerne cette partie uniquement en plus (lecture de ma BDD)

:

Nom : horaire.jpg
Affichages : 173
Taille : 19,3 Ko

L'heure et le " | " sont en px pour avoir la même largeur et l'explication en %.

Je travaille en <div>, faire un tableau pourrait résoudre cela ?

Ou si vous avez une suggestion.

@ +
ddaweb

**ddaweb** · 27/02/2023, 15h14

Envoyé par ddaweb

Je travaille en <div>, faire un tableau pourrait résoudre cela ?

Après quelques tests : la réponse est oui

J'ai fait un peu de CSS pour atteindre un résultat équivalent (pour le thème sombre, j'adapte certaines valeurs) :

Code :

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

1
2
3
4
table { width: 96%; margin: 8px 0px 8px 0px; padding: 4px; border-spacing: 5px 6px; border: 1px dotted #222; border-radius: 10px; }
td { padding: 5px; vertical-align: top; }
td.heure { width: 70px; font-weight: bold; }
td.texte { border: 1px solid #999; border-radius: 5px; }

Pour td.heure j'ai été obligé de mettre un width car toutes les colonnes heures n'avaient pas la même largeur ... mais répétitif suivant les sections affichées, à chaque fois un nouveau tableau.

Résultat final :

Nom : horaire2.jpg
Affichages : 146
Taille : 23,5 Ko

Nom : horaire2.jpg
Affichages : 146
Taille : 23,5 Ko

**NoSmoking** · 01/03/2023, 13h39

Bonjour,

Je me demande si je les ai bien mis dans le bon ordre, même si tout semble fonctionner correctement :

si tu as du mal a visualiser il suffit de se faire un petit schéma :
Nom : media-ddaweb.png
Affichages : 139
Taille : 1,6 Ko

avec :

@media(max-width:767px){ /* ----- GSM */ }
@media(max-width:360px){ /* ----- Petit GSM */ }
@media(min-width:768px){ /* ----- Tablette */ }
@media(min-width:992px){ /* ----- Portables */ }
@media(min-width:1601px){ /* ----- PC */ }
@media(min-width:1921px){ /* ----- PC grand écran*/ }

Pour info, les brekpoints de BootStrap :

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
// X-Small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap
 
// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }
 
// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }
 
// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }
 
// X-Large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
 
// XX-Large devices (larger desktops, 1400px and up)
@media (min-width: 1400px) { ... }

où tu utilises des min-width où tu utilises max-width mais les deux en même temps c'est un coup à se perdre !

Je travaille en <div>, faire un tableau pourrait résoudre cela ?

Pas mal de choses peuvent résoudre cela mais l'usage de <table> ne me paraît pas des plus judicieuses.
Cela dit il faudrait en savoir un peu plus sur la nature des données traitées.

**ddaweb** · 01/03/2023, 17h04

Envoyé par NoSmoking

où tu utilises des min-width où tu utilises max-width mais les deux en même temps c'est un coup à se perdre !

Je suis assez d'accord avec toi, mais certaines contraintes d'affichage des menus bouton pour les plus petits GSM m'ont fait ajouter cette partie -> diminution de la police de caractère afin que le texte puisse y être complet.
J'aurais pu passer a des menus à 3 barres (je ne reviens plus sur son nom), mais j'ai déjà 2 types de menus : pour les PC avec sous-menus déroulants et un pour tablette et GSM avec les sous-menus en bouton.
J'ai également fixé le rendu après 1920 px, juste une police plus grande et une largeur fixe de la page.

Concernant l'utilisation d'une table ... je ne suis pas trop fane non plus, mais dans mon cas cela a été une solution pour un bon rendu responsif pour toutes les tailles des écrans et une mise en page identique ... utilisation de px et %.

Comment je fais : je crée un array multidimensionnel (4 étages) avec toutes les données des horaires des cours qui me permet de faire un bon tri suivant les jours, les sections, les heures, la classe -> lecture via des foreach.
Je n'ai pas réussi de le faire en lecture directe de la BDD il y a quelques années, données de 4 tables avec des INNER JOIN ... à l’occasion je réessaierai, le array me chagrine un peu et je maîtrise un peu mieux les requêtes maintenant ... j'ai été un peu fainéant en reprenant l'ancien code

Au rendu, par jour d'ouverture (cycle répétitif) :
- il y a une div avec le jour de cours
- suivit d'une div avec la section
- la table des horaires de la section
- une div d'une ou plusieurs sections supplémentaires + table des horaires

Voici le code, pas trop difficile :

Code php :

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
			$jour_test='non';
			$section_test='non';
			$heure_test='';
			foreach ($array_cours AS $boucle1) {
				foreach ($boucle1 AS $boucle2) {
					foreach ($boucle2 AS $boucle3) {
						foreach ($boucle3 AS $boucle4) {
							$heure_explode=explode(':',$boucle4['heure_debut']);
							$heure_debut=$heure_explode[0].'h'.$heure_explode[1];
 
							if ($jour_test!=$boucle4['jour']) {
								if ($nbr_jour>=1) { print "</table>"; print "<div class=\"clear\">&nbsp;</div>"; }
								print "<div class=\"div_jour\">".$boucle4['jour']."</div>";
								$jour_test=$boucle4['jour'];
								$nbr_jour ++;
							}
 
							if ($section_test!=$boucle4['section']) {
								if ($nbr_section>=1) { print "</table>";}
								print "<div class=\"div_section\">".$boucle4['section']."</div>";
								print "<table>";
								$section_test=$boucle4['section'];
								$nbr_section ++;
							}
 
							if ($heure_test!=$boucle4['heure_debut']) {
								print "<tr>";
									print "<td class=\"heure\">".$heure_debut."</td>";
									print "<td class=\"texte\"><span class=\"font_prune\"><strong>".$boucle4['classe']."</strong> : </span><span class=\"font_gris\">".$boucle4['classe_info']."</span></td>";
								print "</tr>";
								$heure_test=$boucle4['heure_debut'];
							}
							else {
								print "<tr>";
									print "<td class=\"heure\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|</td>";
									print "<td class=\"texte\"><span class=\"font_prune\"><strong>".$boucle4['classe']."</strong> : </span><span class=\"font_gris\">".$boucle4['classe_info']."</span></td>";
								print "</tr>";
							}
						}
					}
				}
			}
			print "</table>";

NB :
- je viens de voir que pour l'heure j'utilise explode, j'ai découvert qu'il existe une fonction directe ... je dois adapter !
- je code tout en PHP pour cette partie, pas eu envie de faire un mixte de HTML et PHP, plus des 3/4 de cette page est en HTML

[@media] Ordre dans le CSS - soucis utilisation mixte de px / %

CSS

Discussions similaires

Partager

Partager