Intermediocss
Diseno Responsivo
Crea interfaces que se adaptan a cualquier tamano de pantalla con media queries y unidades relativas.
Media Queries
Las media queries aplican estilos condicionalmente basandose en caracteristicas del dispositivo como el ancho de pantalla.
css
1/* Mobile First: estilos base para movil */
2.card {
3 padding: 1rem;
4 font-size: 0.875rem;
5}
6
7/* Tablets (768px) */
8@media (min-width: 768px) {
9 .card {
10 padding: 1.5rem;
11 font-size: 1rem;
12 }
13}
14
15/* Desktop (1024px) */
16@media (min-width: 1024px) {
17 .card {
18 padding: 2rem;
19 font-size: 1.125rem;
20 }
21}Unidades relativas
Las unidades relativas (
rem, em, vw, vh, %) se adaptan al contexto, creando layouts flexibles.
- rem: Relativo al font-size del root (html).
- em: Relativo al font-size del padre.
- vw/vh: Porcentaje del viewport.
- clamp(): Valor fluido con min y max.css
1html { font-size: 16px; }
2
3h1 {
4 /* Fluido: min 1.5rem, ideal 4vw, max 3rem */
5 font-size: clamp(1.5rem, 4vw, 3rem);
6}
7
8.container {
9 width: min(90%, 1200px);
10 margin: 0 auto;
11 padding: 1rem;
12}