28172 sujets

CSS et mise en forme, CSS3

Bonne pratique responsive design

Bonjour , je me demande qu'elle est la meilleur valeur de media queries (min-width , max-width) que je peux mettre pour un design dedié vers les ecrans des laptop et l'autre pour les ecrans desktop.
Merci d'avance Smiley smile
Il ne faut pas définir les médias queries en fonction des milliers des définitions d'écrans du moment - chose impossible - mais en fonction, des breakpoints de votre site. Vous trouverez facilement des tutos a ce sujet en tapant ces mots clefs.
Bonjour,
moi aussi, je suis de la vielle école, je commence grand et je descend vers les mobiles.
Personnellement, je coupe, une seule fois à @media (max-width: 35em) pour aller vers les mobiles, mais je ne suis pas certain que ce soit le bon chiffre.
@Olivier. De ce que j'ai pu comprendre, en adaptatif, dont on a parlé ici il y a quelques temps, il semblerait qu'on utilise beaucoup de breakpoints différents.
Bongota a écrit :
@Olivier. De ce que j'ai pu comprendre, en adaptatif, dont on a parlé ici il y a quelques temps, il semblerait qu'on utilise beaucoup de breakpoints différents.

Ce sont les points de rupture du site : je resize ma page web, le site casse à tel endroit, je met un breakpoint, je continue mon resize et il casse à nouveau, je met un nouveau breakpoint, etc...

Les sites bien construits ont de 3 à 5 breakpoints en fonction de leur complexité. S'il y en a trop il faut se poser des questions sur la structure du site : celui-ci est-il bien conçut ?

Exemple des variables (stylus) de media queries pour mes sites (tous conçus sur le même template), au risque de me répéter ce sont des breakpoints personnalisés, pour un template spécifiques (et non pour viser des tailles d'écran) :
// @subsection  Breakpoints
// @description Définition des points de rupture
// --------------------------------------------------------------------

// @bugfix Nécessité de préciser deux chiffres après la virgule pour éviter un décalage entre 'max-width' et 'min-width' (avec une unité pour éviter les arrondissements par les navigateurs)
$sizeXS =   36.01rem
$sizeS =    65.01rem
$sizeL =    90.01rem
$sizeXL =  120.01rem
$sizeXXL = 140.01rem
$sizeNav =  65.01rem


A noter que grid layout et flexbox n'entrent pas en concurrence avec les media queries : un site à minima complexe ne peut en aucun cas faire l'économie des media queries, hormis pour une page basique. Et de toute façon les media queries ne servent pas que pour les templates de page.
Modifié par Olivier C (21 Jun 2020 - 18:35)
Meilleure solution
Merci pour vos réponses, sa se complètent , en faite la chose que j'ai volu confirmé qu'il ny'a pas une solution standard, tout dépend du besoin. merci !!
Modérateur
Salut sepecat,

sepecat a écrit :
Eh oui... cela fonctionne très bien.
J'utilise les REM pour la mise en page via mon générateur et les points de rupture sont définis dans la même unité sans problème, l'ensemble étant cohérent.

Bah écoute je découvre ça... ça se fait beaucoup ? J'en vois déjà 3 ici qui le font du coup... Par contre j'ai du mal a comprendre le principe de baser une breakpoint de largeur d'écran sur une unité relative a une taille de texte Smiley confus

Bon après tant qu'on me force pas à l'utiliser ça n’importe peu, mais la discussion m’intéresse Smiley lol

Bonne journée les kiwis !
_laurent a écrit :
Salut sepecat,
Bah écoute je découvre ça... ça se fait beaucoup ? J'en vois déjà 3 ici qui le font du coup... Par contre j'ai du mal a comprendre le principe de baser une breakpoint de largeur d'écran sur une unité relative a une taille de texte Smiley confus
Bon après tant qu'on me force pas à l'utiliser ça n’importe peu, mais la discussion m’intéresse Smiley lol
Bonne journée les kiwis !

Hello...
Je ne suis pas sûr que cela soit largement répandu, mais c'est une technique parmi d'autres.
Je n'irai pas non plus jusqu'à dire que c'est la meilleure et celle que tout le monde doit adopter. Pour ma part, elle me convient très bien et j'apprécie le côté relatif des REM et leur facilité d'utilisation par rapport aux EM que j'avais commencé à intégrer au tout début mais qui, à mon sens, posaient problème vu leur trop grande dépendance vis à vis de l'objet conteneur, rendant assez pénible leur calcul.
Comme je l'indiquais dans ma réponse, j'ai basé tous les composants qu'utilise mon générateur sur les REM (mais on pourrait tout aussi bien utiliser une autre unité) et si tu augmentes la taille avec CTRL+ tout se réorganise correctement, y compris avec les points de rupture que je définis par ailleurs au niveau de chaque composant et non pas via une grille globale.
Si tu veux voir le résultat, tu peux faire un saut sur le prototype généré par mon outil. Même en augmentant le facteur jusqu'à 500 % (pour les utilisateurs ayant vraiment de gros problèmes de vue...) la structure de la page reste un tantinet moche mais toutefois exploitable.
Prototype dispo ici https://generateur-thot.fr/index.php (site intégralement généré).
Modifié par sepecat (22 Jun 2020 - 10:42)
Bonjour,
il semble qu'il y ait discussion sur les unités à employer pour les breakpoints et tout le monde n'est pas du même avis. Je viens d'effectuer quelques recherches.
https://medium.com/zoosk-engineering/to-em-or-not-to-em-that-is-the-media-query-question-22f4a65e9747
Et la conclusion de l'article :This decision (d'utiliser les em à la place des px) is ultimately an individual one, but be sure to test and consider your audience.
Ici aussi, on préconise les em : https://zellwk.com/blog/media-query-units/
Mais ici, ils sont déconseillés : https://adamwathan.me/dont-use-em-for-media-queries/
Puisque les spécialistes ne sont pas d'accord entre eux, tant que ça fonctionne, laissons-les débattre et attendons un consensus net.
Bongota a écrit :
Bonjour,
il semble qu'il y ait discussion sur les unités à employer pour les breakpoints et tout le monde n'est pas du même avis. Je viens d'effectuer quelques recherches.
https://medium.com/zoosk-engineering/to-em-or-not-to-em-that-is-the-media-query-question-22f4a65e9747
Et la conclusion de l'article :This decision (d'utiliser les em à la place des px) is ultimately an individual one, but be sure to test and consider your audience.
Ici aussi, on préconise les em : https://zellwk.com/blog/media-query-units/
Mais ici, ils sont déconseillés : https://adamwathan.me/dont-use-em-for-media-queries/
Puisque les spécialistes ne sont pas d'accord entre eux, tant que ça fonctionne, laissons-les débattre et attendons un consensus net.

A priori et sauf erreur de ma part, il semble que les principaux ateliers logiciels actuellement utilisés pour la conception de sites web sont basés sur le pixel pour la définition de leurs points de rupture.
Il n'est donc pas incongru d'utiliser la même unité, au moins dans un premier temps, quitte à faire ensuite ses propres tests et voir s'il y a lieu, ou non, de modifier cette approche.
Chacun peut ainsi se déterminer en fonction de ses besoins et de son aisance à manipuler tel ou tel type de point de grille.
Modifié par sepecat (22 Jun 2020 - 14:11)
_laurent a écrit :
j'ai du mal a comprendre le principe de baser une breakpoint de largeur d'écran sur une unité relative a une taille de texte

La réponse courte : si l'utilisateur change sa taille de police par défaut les pages du site ne pètent pas en responsive.
Modifié par Olivier C (25 Jun 2020 - 03:33)
Sujet clos
Aller à