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).






SUSCRÍBETE A NUESTRO BOLETÍN 

No te pierdas de nuestro contenido ni de ninguna de nuestras guías para que puedas avanzar en los juegos que más te gustan.










Al suscribirte, aceptas nuestra política de privacidad y nuestros términos de servicio.






Tal vez te puede interesar:

  1. ¿Cómo se hace el tamaño máximo de fuente en CSS?
  2. ¿Qué hace “revertir” en CSS?
  3. CSS4 es una mala idea
  4. CSS4

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

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 al

programar

es

https://pseint.es/static/images/programar-cambiar-el-tamano-de-los-valores-en-pasos-en-css-1194-0.jpg

2024-06-13

 

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

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

 

 

Update cookies preferences