Calculadora de CSS clamp()

Introduïu una mida per a pantalles petites i grans i obtingueu un valor clamp() fluid que s'escala de manera suau entremig, ideal per a mides de font, farcits, marges o espais.

Mides
Mínim
Màxim
Valor de clamp()
clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem)

El resultat manté una part en rem en el terme mitjà, de manera que el text encara s'amplia quan algú fa zoom al 200%, cosa que no passaria amb un valor basat només en el viewport.

Vista prèvia

Text fluid, amb la mida ideal.

Ajusteu les mides i les amplades de pantalla per definir el valor.

El càlcul s'executa completament al seu navegador. Cap dada que introdueixi aquí es puja a BroBroGo.

PMF

Com construeix la calculadora el valor clamp()?

S'indiquen dos punts: una mida per a una amplada de pantalla petita i una altra per a una pantalla gran. La calculadora traça una línia recta entre ambdues perquè la mida creixi de manera fluida a mesura que s'amplia la pantalla, i després l'envolta en un clamp() perquè mai no baixi de la mida de pantalla petita ni superi la de pantalla gran. Entre les dues amplades, la mida s'escala de manera fluida; a l'exterior, es manté en el límit corresponent.

Per què el resultat s'expressa en rem i vw en lloc de píxels?

Els límits estan en rem i la part central variable manté un component en rem, de manera que el text continua creixent quan un lector fa zoom o augmenta la mida de font predeterminada del seu navegador (un valor basat només en píxels o en el viewport podria impedir-ho). Escriviu les mides en píxels perquè és com sol pensar la majoria de la gent, i l'eina les converteix a rem utilitzant la mida de font de l'arrel.

Puc utilitzar-ho per a l'espaiat i no només per a la mida de la font?

Sí. El mateix valor funciona per a padding, margin, gap, amplada o alçada; a qualsevol lloc on s'utilitzi una longitud. Canvieu la vista prèvia a Caixa per veure com creix l'espaiat en lloc del text. Si les mides petita i gran són iguals, el resultat es redueix a una longitud fixa simple, ja que no hi ha res a escalar.

Tots els navegadors admeten clamp()?

Sí, tots els navegadors actuals admeten clamp() des del 2020, de manera que podeu utilitzar el valor directament sense cap alternativa. Amb un màxim molt gran o una taxa de canvi ràpida, val la pena fer una comprovació ràpida amb un zoom del 200% per assegurar-se que el text encara s'amplia per als lectors que ho necessitin.

Escrit i revisat per l'equip editorial de BroBroGo.Darrera actualització:

Què fa la Calculadora de CSS clamp()

La Calculadora de CSS clamp() és una eina dissenyada per calcular un valor de la funció CSS clamp() que permet que una mida s'escala de manera suau entre un valor mínim i un valor màxim a través de diferents amplades de pantalla. L'usuari proporciona una mida per a una pantalla petita i una mida per a una pantalla gran, i l'eina genera automàticament la funció clamp() corresponent.

Aquesta funció garanteix que la mida mai no baixarà del valor establert per a la pantalla petita ni superarà el valor definit per a la pantalla gran, escalant-se de manera fluida en l'interval entremig. És una solució altament versàtil que es pot utilitzar per a diverses propietats de longitud en CSS, com ara mides de font, farcits, marges, espais (gaps), amplades o alçades.

Com utilitzar els camps d'entrada de l'eina

Per tal de generar el codi CSS fluid, l'eina requereix que s'introdueixin una sèrie de valors numèrics en els següents camps:

  • Mida (Mínim): El número que representa la mida desitjada a l'amplada de pantalla petita.
  • Amplada de pantalla (Mínim): El número que defineix l'amplada de la pantalla petita.
  • Mida (Màxim): El número que representa la mida desitjada a l'amplada de pantalla gran.
  • Amplada de pantalla (Màxim): El número que defineix l'amplada de la pantalla gran.
  • Mida de font de l'arrel: El número utilitzat per l'eina per convertir les entrades de píxels a l'unitat rem.

L'eina espera que s'introdueixin números vàlids a cada camp per poder realitzar el càlcul correctament.

Valors de sortida i interpretació dels resultats

Un cop introduïdes les dades, la calculadora genera i mostra els següents elements de sortida:

  • Valor de clamp(): La funció CSS clamp() calculada (per exemple, clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem)). Els límits d'aquest valor s'expressen en rem, i la part central variable manté un component en rem.
  • Vista prèvia: Una representació visual interactiva de l'escalat fluid. Es pot visualitzar en mode "Text" (que mostra el text de mostra "Text fluid, amb la mida ideal.") o en mode "Caixa".
  • Amplada de la vista prèvia: Un indicador numèric que mostra l'amplada actual de l'àrea de previsualització.
  • Missatges d'estat: L'eina comunica l'estat del càlcul i del comportament de l'escalat mitjançant els següents missatges:
    • "Ajusteu les mides i les amplades de pantalla per definir el valor."
    • "Escalat invers: la mida disminueix a mesura que la pantalla creix."
    • "Ambdues mides són iguals, de manera que aquest és un valor fix, no fluid."
    • "mantingut al mínim"
    • "mantingut al màxim"
    • "escalat fluid"

Regles de validació i casos especials

Per garantir un funcionament correcte, l'eina aplica certes regles lògiques i de validació sobre les dades introduïdes:

  • Validació de l'amplada de pantalla: L'amplada de pantalla petita ha de ser un número positiu menor que la de la pantalla gran. Si no es compleix aquesta condició, el valor de sortida de clamp() es mostrarà com a — i s'activarà el missatge d'error: "L'amplada de pantalla petita ha de ser un número positiu menor que la de la pantalla gran.".
  • Mides idèntiques: Si la mida petita i la mida gran que s'introdueixen són iguals, el resultat es redueix a una longitud fixa simple en lloc d'un comportament fluid.
  • Conversió a rem: L'eina realitza automàticament la conversió de píxels a rem prenent com a referència el valor definit a la mida de font de l'arrel.
  • Accessibilitat garantida: El disseny del valor de sortida de clamp() assegura que el text continuarà creixent i ampliant-se quan un usuari utilitzi el zoom del navegador o augmenti la mida de font predeterminada del seu programari.

Qui es beneficia d'aquesta calculadora

Aquesta eina és de gran utilitat per a diferents perfils i necessitats dins del desenvolupament web:

  • Dissenyadors i desenvolupadors de layouts adaptatius: Persones que necessiten crear estructures web totalment adaptables a qualsevol dispositiu.
  • Creadors de tipografia fluida: Professionals que busquen que els textos de les seves pàgines s'ajustin de manera harmònica i proporcional segons la mida de la pantalla.
  • Especialistes en espaiat flexible: Aquells que necessiten aplicar valors de farcit (padding), marge (margin) o espaiat (gap) que s'adaptin dinàmicament a l'amplada del dispositiu de l'usuari.
  • Defensors de l'accessibilitat web: Qualsevol persona que vulgui garantir que els seus llocs web compleixin amb els estàndards d'accessibilitat, permetent que els usuaris ampliïn el text mitjançant el zoom o canviant la configuració de font del navegador sense trencar el disseny.

Privadesa i processament de dades

La privadesa dels usuaris està totalment protegida durant l'ús d'aquesta eina. El càlcul s'executa completament al seu navegador. Cap dada que introdueixi aquí es puja a BroBroGo, garantint un processament local i privat en tot moment.

Preguntes freqüents (FAQ)

Com construeix la calculadora el valor clamp()?

S'indiquen dos punts: una mida per a una amplada de pantalla petita i una altra per a una pantalla gran. La calculadora traça una línia recta entre ambdues perquè la mida creixi de manera fluida a mesura que s'amplia la pantalla, i després l'envolta en un clamp() perquè mai no baixi de la mida de pantalla petita ni superi la de pantalla gran. Entre les dues amplades, la mida s'escala de manera fluida; a l'exterior, es manté en el límit corresponent.

Per què el resultat s'expressa en rem i vw en lloc de píxels?

Els límits estan en rem i la part central variable manté un component en rem, de manera que el text continua creixent quan un lector fa zoom o augmenta la mida de font predeterminada del seu navegador (un valor basat només en píxels o en el viewport podria impedir-ho). Escriviu les mides en píxels perquè és com sol pensar la majoria de la gent, i l'eina les converteix a rem utilitzant la mida de font de l'arrel.

Puc utilitzar-ho per a l'espaiat i no només per a la mida de la font?

Sí. El mateix valor funciona per a padding, margin, gap, amplada o alçada; a qualsevol lloc on s'utilitzi una longitud. Canvieu la vista prèvia a Caixa per veure com creix l'espaiat en lloc del text. Si les mides petita i gran són iguals, el resultat es redueix a una longitud fixa simple, ja que no hi ha res a escalar.

Tots els navegadors admeten clamp()?

Sí, tots els navegadors actuals admeten clamp() des del 2020, de manera que podeu utilitzar el valor directament sense cap alternativa. Amb un màxim molt gran o una taxa de canvi ràpida, val la pena fer una comprovació ràpida amb un zoom del 200% per assegurar-se que el text encara s'amplia per als lectors que ho necessitin.

Generador de CSS Cubic BezierArrossegui els dos controladors per dissenyar una corba de transició, observi el moviment d'un punt en comparació amb un de constant i copiï el valor cubic-bezier().Generador de Box ShadowArrossegui els lliscadors per dissenyar una ombra de caixa, acumuli capes per donar profunditat i copiï el CSS resultant a l'instant.Generador de degradatsCreeu un degradat lineal, radial o cònic, afegiu punts de parada de color i definiu la direcció, i després copieu el CSS amb un sol clic.Generador de Border RadiusArrodoneixi cada cantó amb lliscadors, creï gotes orgàniques amb el mode el·líptic i copiï el CSS a l'instant.Generador de FlexboxConfigureu un contenidor flex i els seus elements amb controls visuals, observeu com reacciona el disseny en temps real i copieu el CSS amb un sol clic.Generador de CSS GridDefiniu les columnes i files, arrossegueu per les cel·les per col·locar els elements i copieu el CSS de la quadrícula amb l'HTML corresponent amb un sol clic.Embellidor i minificador de CSSTorneu a sagnar el CSS desordenat per llegir-lo millor, o minifiqueu-lo per publicar-lo, amb un mode segur que mai reordena les regles.Conversor de px a rem i emConverteixi entre px, rem i em utilitzant les seves pròpies mides de font d'arrel i de context: editeu qualsevol camp i els altres dos s'actualitzaran mentre escriviu.