Bonjour,

est-il possible d'avoir plusieur valeurs de width pour une div?
Par exemple:

width:auto;
max-width:48em;
min:width:32em;

Je cherche un moyen "simple" de faire un layout "elastic" (ou fluide, pas certain de la difference) tout en m'assurant que mes div ne deviennent pas ridiculement petites ou larges -- et garder un bon confort de lecture, avec une largeur oscillant entre 320 et 480px et 50-70 caract ères par ligne.

Merci
Laurent
Bonjour,

un bloc occupe par défaut 100% de la largeur de son parent donc la déclaration width: auto ne semble pas nécessaire.
Sinon, il est tout à fait possible de combiner max-width et min-width comme tu le fais.
Attention à l'erreur de syntaxe c'est bien min-width et pas min:width.

Dernier point, tu peux tester le bon fonctionnement de ton code en redimensionnant la fenêtre du navigateur.

Bonne journée.
blondin a écrit :

un bloc occupe par défaut 100% de la largeur de son parent donc la déclaration width: auto ne semble pas nécessaire.


Déclarer le width:auto ne permet-il pas d'éviter certains petits soucis (comme par exemple, les ennuis qui peuvent survenir avec width:100% + bordures/padding)?

blondin a écrit :

Sinon, il est tout à fait possible de combiner max-width et min-width comme tu le fais.


Pensez-vous que le design fluide puisse avantageusement remplacer l'usage (abus?) de media queries?

Je suis en train de faire des essais avec les media queries, et j'ai parfois l'impression que je pourrais aller plus vite, et garder un code plus lisible, en jouant simplement avec les pourcentages et largeurs min-max.

Annelise
Annelise a écrit :
Déclarer le width:auto ne permet-il pas d'éviter certains petits soucis (comme par exemple, les ennuis qui peuvent survenir avec width:100% + bordures/padding)?

Il y a un article intéressant avec un exemple sur ce sujet.
box-sizing: border-box résoud ce probème de calcul de taille de boites.

Annelise a écrit :
Pensez-vous que le design fluide puisse avantageusement remplacer l'usage (abus?) de media queries?

Les médias queries permettent de saisir des règles complémentaires en fonction du terminal comme display:none, changement de couleur de background ou/de font.

Design fluide et media queries sont complémentaires.