Cas de figure mediaqueries

Hello,

Je voulais connaitre une peu les résolutions et standards de façon à pouvoir écrire une règle universelle pour les mediaqueries de mon site. En somme un affichage pc, tablettes et téléphone. Que voyez-vous ?

Claire

Salut,

C'est super variable.... vraiment. Il y a de grand téléphones et de petites tablettes, des petits pc et des grand touch screen etc...

Pourquoi tu ne choisirais pas les breakpoint en fonction de l'affichage de ton site ? Quand ca devient trop sérré / trop large (tout dépend dans quel sens tu le construit) hop tu break et tu améliore...

Salut et merci Laurent,

L'idée c'est d'essayer de faire quelque chose de convivial et à peu près adapté à tous les supports même si pas parfait.

Penses-tu que je couvre mes besoins avec ces 3 règles ?

un affichage avec une largeur max de 480
un affichage entre 480 et 768
et un dernier supérieur à 768

Claire

Bonjour,
j'ai réalisé mon tout premier site "responsive avec les @media suivants:

@media all and (min-width:1366px) and (max-width:1920px){
@media all and (min-width: 1024px) and (max-width: 1366px){
@media all and (min-width: 768px) and (max-width: 1024px) {
@media all and (min-width:481px) and (max-width:767px) {
@media all and (max-width: 480px){

C'était du bricolage, en css pur. Il y aurait certainement à nettoyer du code, mais il s'affiche parfaitement sur tous les périphériques, excepté peut-être les très grands écrans que j'ai négligés.

Maintenant, je suis en train de refaire un autre site avec grid. Il n'y aura plus qu'un seul point de rupture
Comme quoi, la conception des sites évolue rapidement. Avec l'arrivée de flexbox et grid, les @media ne devraient plus servir qu'à changer la disposition des éléments quand ils ne tiennent plus dans la page, et non plus courir après toutes les résolutions du marché, course perdue d'avance.
Cordialement.

_laurent a écrit :
Pourquoi tu ne choisirais pas les breakpoint en fonction de l'affichage de ton site ? Quand ca devient trop sérré / trop large (tout dépend dans quel sens tu le construit) hop tu break et tu améliore...

+ 1. C'est la règle de base depuis fort longtemps déjà. La course aux résolutions du moment est perdue d'avance.

Merci à tous.

Je pensais néanmoins qu'on pouvait se baser sur quelques standards.

et me pencher sur ces notions de flexbox et grid

:)