Yo, durante el último año más o menos: “remson geniales! ¡Voy a dimensionar todo con ellos, de esa manera puedo ajustar el tamaño de fuente en el elemento raíz y todo se escalará con él! Fue un lindo sueño. Y no fue un desastre. Eso es lo que estoy haciendo ahora mismo aquí en Programar Plusy así es como se desarrolla en un escenario muy simple:
Eso viene de esencialmente:
/* Document level adjustments */
html {
font-size: 17px;
}
@media (max-width: 900px) {
html { font-size: 15px; }
}
@media (max-width: 400px) {
html { font-size: 13px; }
}
/* Type will scale with document */
h1 {
font-size: 3rem;
}
h2 {
font-size: 2.5rem;
}
h3 {
font-size: 2rem;
}Admito que me gusta esa simplicidad, pero estoy empezando a pensar que es demasiado soñador para todos los sitios excepto para los más simples. El problema principal: simplemente no puede esperar que el tipo que configuró en un tamaño de pantalla se vea bien simplemente reduciéndolo de forma totalmente proporcional. La letra grande puede volverse demasiado grande al aumentar la escala. El tipo pequeño puede volverse demasiado pequeño (uno común que me atrapa). O incluso lo contrario de cualquiera de los dos, donde la letra grande puede no ser lo suficientemente pequeña.
Si alguna de esas cosas sucede, entonces está haciendo ajustes específicos de consulta de @media que no solo se vuelven confusos sino que no son muy eficientes (ajustando el tamaño solo para ajustarlo nuevamente para solucionarlo).
Así que aquí está mi idea: todavía conservas px ajustes de tamaño a nivel de documento para que pueda realizar cambios de tamaño de barrido fáciles/eficientes. Pero luego, cada módulo en la página tiene un tamaño de fuente establecido en rem. Los elementos de texto reales (h1, h2, p, li, lo que sea), si los dimensiona, se dimensionan en em y, por lo tanto, se vuelven relativos al módulo.
De esta manera, puede ajustar el tamaño de fuente a nivel de módulo, lo cual es bastante fácil. Las posibilidades de que el tipo dentro de un solo módulo tenga buenas proporciones y puedan escalar juntas muy bien son altas. Entonces eso se desarrollaría así:
No a escala. Solo muestra qué unidades irían en qué.
Puedes jugar con la idea aquí ajustando los controles deslizantes:
Vea el Pen Em AND Rem de Chris Coyier (@chriscoyier) en CodePen.
En cierto tamaño mediano, todo se ve bien. Al escalar, puede llegar a un punto en el que los artículos principales tienen un tamaño grande, pero las cosas de la barra lateral no necesitan ser tan grandes. Con este sistema, sería fácil apuntarlos y reducirlos. Al reducir la escala, esos módulos de la barra lateral se vuelven demasiado pequeños demasiado rápido, por lo que podría volver a colocarlos fácilmente. Incluso puede haber tamaños en los que iguale las cosas porque se ha ido en una sola columna (o similar).
Así quedaría:
/* Document level adjustments */
html {
font-size: 17px;
}
@media (max-width: 900px) {
html { font-size: 15px; }
}
@media (max-width: 400px) {
html { font-size: 13px; }
}
/* Modules will scale with document */
.header {
font-size: 1.5rem;
}
.footer {
font-size: 0.75rem;
}
.sidebar {
font-size: 0.85rem;
}
/* Type will scale with modules */
h1 {
font-size: 3em;
}
h2 {
font-size: 2.5em;
}
h3 {
font-size: 2em;
}Puse “idea” en el título porque todavía no he creado un sitio que haga esto, pero tiene sentido para mí y seguramente lo intentaré.