CSS width 100% OU max-width en pixels

Question

Comment pourrait-on créer une règle CSS pour la largeur qui

• Utilise une largeur de 100% par défaut

• Si la largeur de 100% dépasse une certaine largeur de pixel (disons 512 px), alors la largeur est limitée à cette largeur de pixel.

Je ne suis pas sûr des relations entre largeur et largeur maximale, ni de la façon dont calc() est pris en charge ou pourrait exprimer cela. Il faudrait que cela fonctionne avec les derniers navigateurs WebKit et Firefox 4. Le support d'IE8 etc. n'est pas nécessaire

Answer 1

C'est en fait l'utilisation prévue de max-width . Si la valeur calculée (réelle) width d'un élément dépasse max-width il sera limité à la valeur maximale au lieu d'aller au-delà. Le pourcentage par rapport aux pixels n'est pas pertinent.

Déclarez les deux dans la même règle comme ceci (pas besoin de l'élément calc() fonction) :

#somediv {
    width: 100%;
    max-width: 512px;
}

Answer 2

S'il s'agit d'un élément de niveau bloc, il devrait être à 100 % par défaut et il n'est donc pas nécessaire de déclarer la largeur. max-width: 512px; le limiterait

calc() n'est pas très bien supporté, mais dans ce cas, je ne pense pas que vous en ayez besoin.

Answer 3

div{ max-width: 512px; }

devrait suffire.