1.1 - Tipografía fija
h1 { font-size: 21px; }
1.2 - Uso de <em>
Live demo
html { font-size: 62.5%; } /* 10 px */
h1 { font-size: 3em; } /* 30 px */
h2 { font-size: 2em; } /* 20 px */
p { font-size: 1.2em; } /* 12 px */
1.2 - Uso de <rem>
Live demo
html { font-size: 62.5%; } /* 10 px */
h1 { font-size: 3rem; } /* 30 px */
h2 { font-size: 2rem; } /* 20 px */
p { font-size: 1.2rem; } /* 12 px */
Lecturas recomendadas
2.1 - Contenido que fluye
2.2 - Convertir en fluido
valor base (px) ÷ contexto (px) = resultado (%)
el tamaño del que disponemos en píxeles
el tamaño del elemento parent*, en píxeles
el valor equivalente, en porcentaje
2.2 - Convertir en fluido
main { width: 1152px; }
.sidebar {
width: 350px;
margin: 10px;
float: left;
}
.contenido {
width: 802px;
padding: 5px;
float: right;
}
<body>
<main>
<section class="sidebar">
<!-- Barra lateral -->
</section>
<section class="contenido">
<!-- Zona de contenido -->
</section>
</main>
</body>
2.2 - Convertir en fluido
main {
/* Contenedor fluído.
* Originalmente 1152 */
width: 90%;
max-width: 1920px;
}
.sidebar {
width: 30.38194%; /* 350 ÷ 1152 */
...
}
.contenido {
width: 69.61805%; /* 802 ÷ 1152 */
...
}
<body>
<main>
<section class="sidebar">
<!-- Barra lateral -->
</section>
<section class="contenido">
<!-- Zona de contenido -->
</section>
</main>
</body>
valor objetivo (px) ÷ contexto (px) = resultado (%)
el contexto es <main>
Lecturas recomendadas
3.1 - Contenido que se adapta
3.2 - Puntos de ruptura
3.3 - Media queries
pantalla.
Query:
ancho menor o igual a 680px.
@media screen and (max-width: 680px) {
/* Estilos */
}
3.3 - Media queries
/* Otros estilos*/
h1 {
font-size: 2em;
}
@media screen and (max-width: 680px) {
h1 { font-size: 3em; text-align: center; }
}
/* Otros estilos*/
Live demo
3.4 - Uniéndolo todo
Lecturas recomendadas
4.1 - Mobile First
El dispositivo no es quien dicta los puntos de ruptura, el layout y el contenido, sí.
4.1 - Mobile First
4.2 - Responsive Web Design
4.3 - Responsive Web design vs el resto
Diseño fluido: Una optimización válida pero que resulta muy limitada en viewports pequeños.
Diseño adaptativo: No cubre todos los contextos, está delimitado por uno o varios en particular (dispositivo, resolución, etc...).
Diseño responsivo: Cubre todos los contextos porque se centra en hacer que el layout (y su contenido) sean accesibles de forma universal, es agnóstico a dispositivo, resolución, etc.
Lecturas recomendadas
5.1 - Responsive images
5.2 - Responsive media