Generador de CSS clamp
Introduzca los anchos y tamaños de pantalla para pantallas pequeñas y grandes para generar CSS que cambie suavemente el tamaño del texto o los espacios. Previsualice la salida en px o rem y luego copie el CSS y el código de Tailwind o guárdelos como texto.
Qué puedes hacer
Indicar 2 pares de ancho y tamaño
Indica tamaños para un viewport pequeño y uno grande. Admite 6 tipos: tamaño de fuente, separaciones, relleno, margen, ancho y alto.
Generar código en px o rem
Introduce todos los valores en px y elige px o rem para la salida. Obtén una declaración CSS y código de propiedad arbitraria de Tailwind.
Comprobar el CSS generado al instante
Aplica el CSS a dos elementos en la vista previa. Comprueba el aspecto del texto y el espaciado con el ancho actual del marco.
Cómo se usa
Elegir la propiedad que se cambiará
Elige la propiedad CSS que quieras indicar, como font-size para el tamaño del texto o gap para el espacio entre elementos.
Introducir dos anchos de viewport y sus tamaños
Introduce los dos anchos del viewport y su tamaño en px. El tamaño para el viewport menor no puede superar el del viewport mayor.
Comprobar la unidad de salida y generar
Elige px o rem en los ajustes avanzados. Para rem, comprueba también el tamaño de fuente base antes de pulsar Generar CSS.
Vista previa y obtención del código
Copia el CSS y pégalo donde vayas a usarlo. Abre el código de Tailwind para obtenerlo. También puedes copiar ambos elementos juntos o guardarlos como texto.
Útil para
Cambiar suavemente el tamaño de los encabezados
Cuando quieras definir tamaños de texto para viewports estrechos y anchos y variarlos de forma continua entre esos anchos, en lugar de hacerlo por pasos.
Ajustar el espaciado al viewport
Cuando quieras que la separación entre tarjetas o el relleno interior varíen dentro de los tamaños mínimo y máximo que hayas establecido.
Indicar tamaños fluidos y leer la vista previa
Los 3 valores de clamp
clamp es una función CSS que indica un valor mínimo, uno fluido y uno máximo. La fórmula generada conecta dos puntos de referencia con una expresión lineal y limita los tamaños fuera del intervalo a los valores de los extremos.
Entrada en px; salida en px o rem
Los anchos del viewport y los tamaños se introducen en px. Para una salida en rem, los tamaños y el término fijo se dividen por el tamaño de fuente base, mientras que el coeficiente vw del ancho del viewport se mantiene sin cambios.
Ajustar la base rem al lugar donde se usa el código
De forma predeterminada, el código considera que 1rem equivale a 16px. Si el tamaño de fuente del elemento raíz es diferente donde se usa el código, también cambiarán los tamaños de los extremos y cómo varía el tamaño. Compruébalo en el lugar donde lo uses.
El marco de vista previa define el ancho del viewport
La vista previa es un marco de visualización independiente. Calcula vw según el ancho dentro del marco, no el ancho de toda la pantalla. Según la propiedad, el mismo CSS generado se aplica al texto, al espacio entre los dos elementos, a la separación o a las dimensiones de los elementos.
Comprueba también el lugar donde se usa el código
El texto y la estructura de la vista previa son fijos. Comprueba también las fuentes, el texto largo, los saltos de línea y la ampliación de texto del navegador donde uses el código. El código de Tailwind usa el formato de propiedades arbitrarias; comprueba también que se detecte y genere en el lugar donde lo uses.
Preguntas frecuentes
¿Qué ocurre fuera del intervalo de anchos de viewport especificado?
Los anchos inferiores al menor ancho indicado usan el tamaño mínimo, y los superiores al mayor usan el tamaño máximo. Para rem, debes usar el mismo tamaño de fuente base que cuando se generó el código.
¿Cuál es el tamaño de fuente base de rem?
Indica cuántos px corresponden a 1rem en el cálculo. El valor predeterminado es 16px y puedes cambiarlo a 1–1000px en los ajustes avanzados. Haz que coincida con el tamaño de fuente del elemento raíz donde vayas a usar el código.
¿Puedo indicar tamaños iguales o valores negativos?
Indica el mismo valor como mínimo y máximo para obtener un tamaño constante. Solo se permiten valores negativos para margin. No se admiten tamaños que disminuyan al aumentar el ancho del viewport.
¿Los cambios en las propiedades o los valores se aplican de inmediato?
Al cambiarlos, se borran el código generado y la vista previa. Pulsa Generar CSS para actualizarlos. Lo mismo ocurre al cambiar la unidad de salida o el tamaño de fuente base.
¿Puedo cambiar el texto de la vista previa?
Tanto el texto de muestra como Aa 123 son fijos. No se pueden editar. Comprueba también el texto real y el ancho de visualización en la página que use el CSS generado.
Entradas y resultados
- Ancho del viewport
- 1–100000px. El ancho menor del viewport debe ser inferior al mayor. También se admiten decimales.
- Tamaño
- 0–10000px. Solo margin puede llegar a −10000px. El tamaño para el viewport menor no puede superar el del viewport mayor.
- Salida
- Una declaración CSS y una propiedad arbitraria de Tailwind. Guarda ambos elementos como css-clamp-generator.txt.
- Precisión
- La fórmula generada usa coeficientes de hasta 13 dígitos significativos. Puede producirse un error, por ejemplo, con anchos tan próximos que la fórmula redondeada no reproduzca los puntos de referencia.