Largeur CSS 100% OR largeur max en pixels

Question

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

Utilise 100% de largeur 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 largeur et largeur maximale, ni de la façon dont calc () est pris en charge ou pourrait l'exprimer. Cela devrait fonctionner avec les derniers navigateurs WebKit et Firefox 4. IE8, etc.

BoltClock · Accepted Answer

C'est en fait l'utilisation prévue de max-width . Si le (réel) width calculé d'un élément dépasse max-width, Il sera contraint à la valeur max au lieu de le dépasser. 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 la fonction calc()):

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

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

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

clairesuzy · Answer

Si c'est un élément de niveau bloc, il devrait être de 100% par défaut, donc pas besoin de déclarer la largeur, alors max-width: 512px; Le réduirait

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

Ian Wood · Answer

div{ max-width: 512px; }

devrait suffire.