Redimensionner les valeurs dans les étapes de CSS

Il y a en fait une fonction étapes () dans CSS, mais elle n'est utilisée que pour l'animation. Vous ne pouvez pas, par exemple, dire à un élément qu'il est autorisé à croître en hauteur mais uniquement par étapes de 10px. Peut-être un jour? Je ne sais pas. Il faudrait y avoir des cas d'utilisation assez clairs que quelque chose comme le repeat en arrière-plan: l'espace || rond; ne gère pas déjà.

Une autre façon de gérer les étapes serait les requêtes multimédias séquentielles.

 @media (max-width: 1500px) {body {Font-Size: 30px; }}
@Media (max-width: 1400px) {body {Font-Size: 28px; }}
@Media (max-width: 1300px) {body {Font-Size: 26px; }}
@Media (max-width: 1200px) {body {Font-Size: 24px; }}
@Media (max-width: 1000px) {body {Font-Size: 22px; }}
@Media (max-width: 900px) {body {font-size: 20px; }}
@Media (max-width: 800px) {body {Font-Size: 18px; }}
@Media (max-width: 700px) {body {Font-Size: 16px; }}
@Media (max-width: 600px) {body {Font-Size: 14px; }}
@Media (max-width: 500px) {body {Font-Size: 12px; }}
@Media (max-width: 400px) {body {Font-Size: 10px; }}
@Media (max-width: 300px) {body {font-size: 8px; }}

C'est juste bizarre, et vous voudriez probablement utiliser la typographie fluide, mais le point ici est de redimensionner les étapes et pas seulement la fluidité.

Je suis tombé sur une autre façon de gérer les étapes dans une réponse Stackoverflow de John Henkel il y a quelque temps. (J'ai été informé que Star Simpson l'a également appelé.) C'est un hack ridicule et vous ne devriez jamais l'utiliser. Mais c'est une astuce CSS, donc je suis contractuellement obligé de le partager.

La fonction CALC utilise un flotteur à double précision. Par conséquent, il présente une fonction d'étape près de 1E18… cela se rendra aux valeurs 0px, 1024px, 2048px, etc.

 calc (6e18px 100vw - 6e18px);

C'est assez farfelu. C'est un «détail d'implémentation» étrange qui n'a pas été spécifié, vous ne le verrez donc que dans Chrome et Safari.

Vous pouvez jouer avec ce calcul et appliquer la valeur à tout ce que vous voulez. Je me suis un peu réglé et l'appliquer à la taille de police à la place.

Essayez de redimensionner cela pour voir le comportement de pas (dans Chrome ou Safari).

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!