28106 sujets

CSS et mise en forme, CSS3

Bonsoir,

J'ai un site designé pour desktop (non responsive). Je voudrais ajouter une version pour mobile. J'ai lu plusieurs articles d'Alsacréation. Je pense avoir compris le principe des media queries. J'ai encore du mal avec le principe de viewport. Et avec les différentes tailles et résolutions d'écran qui existent, je me demande juste quelle est la meilleure max-width à utiliser ?

Merci de votre aide.
Modérateur
Salut !

J'aurais tendance a dire : la taille ou ton design n'est plus lisible Smiley lol

Sinon c'est aux alentours de 600px mais comme tu dis il y a tellement de résolution qu'il vaut mieux se baser sur ton design plutôt que d'essayer de chopper la taille de tout les smartphones...

576px pour KNACSS https://www.knacss.com/doc.html#rwd
578px pour Bootstrap https://getbootstrap.com/docs/5.0/layout/breakpoints/
600px pour Material https://material.io/design/layout/responsive-layout-grid.html#breakpoints

Mais la encore ce ne sont que les valeurs "xs" ils ont au autre Breakpoints en "s" etc.. mais vu que ce sont des frameworks ils ne peuvent pas coller aux design donc ils ont mis les breakpoints par défaut.
Merci _laurent,

Mon site actuel est sur une colonne centrée en 1280 px de large. Je pense laisser les tablettes utiliser la version desktop.

Donc pour les mobiles, je pourrais mettre un max-width à 600px soit la moitié ?
Modérateur
Mmmmmh je connais pas ton design mais comme ca je dirait juste de mettre un max-width a 1280px et en dessous bas ca prend 100% de la largeur peut importe la largeur. Je vois pas l'intérêt d'avoir un max-width a 600px
Ok. Et il faut prévoir une résolution particulière avec les écrans rétina & co ?