Ejemplo de CSS max ()

los max() CSS La función le permite establecer el valor más grande (más positivo) de una lista de expresiones separadas por comas como el valor de un valor de propiedad CSS. los max() La función se puede utilizar en cualquier lugar <length>, <frequency>, <angle>, <time>, <percentage>, <number>, o <integer> esta permitido.

En el primer ejemplo anterior, el ancho será de al menos 400px, pero será más ancho si la ventana tiene más de 2000px de ancho (en cuyo caso 1vw sería 20px, entonces 20vw sería 400px). Pensar en max() valor como proporcionar el mínimo valor que puede tener una propiedad.

Sintaxis

los max() La función toma una o más expresiones separadas por comas como parámetro, y el valor de expresión más grande (más positivo) se utiliza como valor de la propiedad a la que está asignada.

Las expresiones pueden ser expresiones matemáticas (usando operadores aritméticos), valores literales u otras expresiones, como attr(), que evalúan a un tipo de argumento válido (como <length>), o anidado min() y max() funciones.

Puede usar diferentes unidades para cada valor en su expresión. También puede utilizar paréntesis para establecer el orden de cálculo cuando sea necesario.

Notas

• Expresiones matemáticas que involucran porcentajes para anchos y alturas en columnas de tabla, grupos de columnas de tabla, filas de tabla, grupos de fila de tabla y celdas de tabla en tablas de diseño automático y fijo mayo ser tratado como si auto había sido especificado.
• Está permitido anidar min() y otra max() funciona como valores de expresión. Las expresiones son expresiones matemáticas completas, por lo que puede usar la suma, resta, multiplicación y división directas sin usar la función calc () en sí.
• La expresión puede ser valores que combinen los operadores de suma (+), resta (-), multiplicación
• y división (/), utilizando reglas estándar de precedencia de operadores. Asegúrese de dejar un espacio a cada lado de los operandos + y -. Los operandos de la expresión pueden ser valor de sintaxis. min() Puede (y a menudo necesita) combinar max() y max() valores, o uso clamp() Dentro de un calc() o

función.

max( <calc-sum># )
where 
<calc-sum> = <calc-product> [ [ '+' | '-' ] <calc-product> ]*
where 
<calc-product> = <calc-value> [ '*' <calc-value> | "https://foroayuda.es/" <number> ]*
where 
<calc-value> = <number> | <dimension> | <percentage> | ( <calc-sum> )

Sintaxis formal

Ejemplos de

Establecer un tamaño mínimo para una fuente

Otro caso de uso para las funciones de CSS es permitir que el tamaño de la fuente aumente mientras se asegura que sea al menos un tamaño mínimo, lo que permite tamaños de fuente receptivos y garantiza la legibilidad.

h1 {
  font-size: 2rem;
}
h1.responsive {
  font-size: max(4vw, 2em, 2rem);
}

Veamos algo de CSS:

<h1>This text is always legible, but doesn't change size</h1>
<h1 class="responsive">This text is always legible, and is responsive, to a point</h1>

El tamaño de fuente será como mínimo de 2 rems, o el doble del tamaño predeterminado de fuente para la página. Esto asegura que sea legible y asegura la accesibilidad. max() Pensar en

funciona como encontrar el valor mínimo permitido para una propiedad.

Preocupaciones de accesibilidad max() Cuando min() se utiliza para controlar el tamaño del texto, asegúrese de que el texto sea siempre lo suficientemente grande para leerlo. Una sugerencia es utilizar el max() función anidada dentro de una

small {
  font-size: max(min(0.5vw, 0.5em), 1rem);
}

que tiene como segundo valor una unidad de longitud relativa que siempre es lo suficientemente grande para leer. Por ejemplo: Esto asegura un tamaño mínimo de1rem

• , con un tamaño de texto que se escala si se amplía la página.
• MDN Entendiendo WCAG, explicaciones de la Pauta 1.4

Comprender el criterio de cumplimiento 1.4.4 | W3C Entendiendo WCAG 2.0

Definición inicial

12,0

• calc()
• clamp()
• min()
• Ver también