Cambiar el tamaño de los valores en pasos en CSS

En realidad, existe una steps()función en CSS, pero solo se usa para animation. No se puede, por ejemplo, decirle a un elemento que se le permite crecer en altura, sino solo en pasos de 10px. ¿Tal vez algún día? Nariz. Tendría que haber algunos casos de uso bastante claros que algo así aún background-repeat: space || round;no maneja.

Otra forma de manejar los pasos serán las consultas de medios secuenciales.

@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; }}

Eso es simplemente extraño y probablemente quieras usar una tipografía fluida, pero el punto aquí es cambiar el tamaño en pasos y no solo con fluidez.

Hace un tiempo encontré otra forma de manejar los pasos en una respuesta de StackOverflow de John Henkel. (Me informó que Star Simpson también lo mencionó). Es un truco ridículo y nunca deberías usarlo. Pero es un truco de CSS, por lo que estoy obligado por contrato a compartirlo.

La función calc utiliza flotador de doble precisión. Por lo tanto, exhibe una función de paso cerca de 1e18… Esto se ajustará a los valores 0px, 1024px, 2048px, etc.

calc(6e18px + 100vw - 6e18px);

Eso es bastante extraño. Es un “detalle de implementación” extraño que no se ha especificado, por lo que solo lo verás en Chrome y Safari.

Puedes jugar con ese cálculo y aplicar el valor a lo que quieras. Aquí estoy yo ajustándolo un poco y aplicándolo en font-sizesu lugar.

Intento cambiar su tamaño para ver el comportamiento de los pasos (en Chrome o Safari).