Philip: Página creada con «'''CSS Texto adaptable''' es un enfoque para el diseño de contenido textual que garantiza una visualización óptima del texto en diversos dispositivos y pantallas. Esta tecnología es una parte esencial del diseño web responsivo. == Unidades de medida principales == === Unidades relativas === * '''`em`''' – unidad relativa que depende del tamaño de fuente del elemento padre * '''`rem`''' – unidad relativa que depende del tamaño de fue…»

2025-03-15T18:41:22Z

Página creada con «'''CSS Texto adaptable''' es un enfoque para el diseño de contenido textual que garantiza una visualización óptima del texto en diversos dispositivos y pantallas. Esta tecnología es una parte esencial del diseño web responsivo. == Unidades de medida principales == === Unidades relativas === * '''<code>em</code>''' – unidad relativa que depende del tamaño de fuente del elemento padre * '''<code>rem</code>''' – unidad relativa que depende del tamaño de fue…»

Página nueva

'''CSS Texto adaptable''' es un enfoque para el diseño de contenido textual que garantiza una visualización óptima del texto en diversos dispositivos y pantallas. Esta tecnología es una parte esencial del diseño web responsivo.

== Unidades de medida principales ==

=== Unidades relativas ===

* '''<code>em</code>''' – unidad relativa que depende del tamaño de fuente del elemento padre
* '''<code>rem</code>''' – unidad relativa que depende del tamaño de fuente del elemento raíz (root em)
* '''<code>vw</code>''' – unidad equivalente al 1% del ancho del viewport
* '''<code>vh</code>''' – unidad equivalente al 1% de la altura del viewport
* '''<code>vmin</code>''' – el menor valor entre vw y vh
* '''<code>vmax</code>''' – el mayor valor entre vw y vh

=== Unidades absolutas ===

* '''<code>px</code>''' – píxeles
* '''<code>pt</code>''' – puntos
* '''<code>pc</code>''' – picas

=== Propiedades ===
* <code>font-size</code> — tamaño de la fuente.
* <code>line-height</code> — altura de línea.
* <code>font-weight</code> — grosor de la fuente.
* <code>text-align</code> — alineación del texto.
* <code>word-wrap</code> y <code>overflow-wrap</code> — control de salto de línea en las palabras.

== Técnicas de adaptación ==

=== Tipografía fluida (Fluid Typography) ===
Fluid Typography permite escalar el texto de manera fluida según el tamaño de la pantalla:<syntaxhighlight lang="css">
.fluid-text {
font-size: clamp(1rem, 0.5rem + 2vw, 2rem);
}
</syntaxhighlight>

=== Media Queries ===
Las Media Queries permiten definir diferentes estilos según el tamaño de la pantalla:<syntaxhighlight lang="css">
@media screen and (max-width: 768px) {
body {
font-size: 16px;
}
}

@media screen and (min-width: 769px) {
body {
font-size: 18px;
}
}
</syntaxhighlight>

== La función calc() ==
La función <code>calc()</code> permite combinar diferentes unidades de medida:<syntaxhighlight lang="css">
.adaptive-heading {
font-size: calc(16px + 2vw);
line-height: calc(1.1em + 0.5vw);
}
</syntaxhighlight>

== Funciones modernas de CSS ==

=== clamp() ===
La función <code>clamp()</code> establece valores mínimos, preferidos y máximos:<syntaxhighlight lang="css">
.heading {
font-size: clamp(1.5rem, 5vw, 3rem);
}
</syntaxhighlight>

=== min() y max() ===
Las funciones <code>min()</code> y <code>max()</code> ayudan a establecer límites dinámicos:<syntaxhighlight lang="css">
.paragraph {
width: min(65ch, 100%);
font-size: max(1rem, 2vw);
}
</syntaxhighlight>

== Ejemplos de uso ==

=== Título adaptable ===
<syntaxhighlight lang="css">
h1 {
font-size: clamp(2rem, 5vw + 1rem, 4rem);
line-height: 1.2;
margin-bottom: calc(1rem + 2vw);
}
</syntaxhighlight>

=== Párrafo legible ===
<syntaxhighlight lang="css">
p {
font-size: clamp(1rem, 1rem + 0.5vw, 1.25rem);
line-height: 1.6;
max-width: 65ch;
margin: 0 auto;
}
</syntaxhighlight>
Resultado del texto legible:
{{Iframe
|url = https://codeeditor.ru/code.php?id=2502KSM7stvi1Y&lang=es
|altura = 500px
|nombre = CSS Texto adaptable
}}

== Consejos prácticos ==

* Utiliza unidades de medida relativas en lugar de absolutas
* Combina diferentes técnicas para obtener resultados óptimos
* Prueba el diseño en distintos dispositivos
* Considera la legibilidad del texto
* Establece valores mínimos y máximos para evitar tamaños extremos

== Compatibilidad con navegadores ==
{| class="wikitable"
!Función
!Chrome
!Firefox
!Safari
!Edge
|-
|clamp()
|79+
|75+
|13.1+
|79+
|-
|calc()
|19+
|4+
|6+
|12+
|-
|vw/vh
|20+
|19+
|6+
|12+
|}

CSS Texto adaptable - Historial de revisiones