2.7 KiB
| title | localeTitle |
|---|---|
| Responsive Web Design | Diseño web adaptable |
Diseño web adaptable
El diseño web sensible es el concepto de diseño de páginas web que se adaptan a diferentes tamaños de pantalla. Por lo general, implica el uso de diferentes diseños, tamaños de fuente y ubicación de los menús de navegación.
Con el fin de crear una página web receptiva, CSS se usa comúnmente para estilizar sus elementos HTML. Algunos métodos comunes en CSS que se usan para crear diseños web sensibles son:
- Escribiendo consultas de medios
- Usando frameworks CSS preexistentes
- Usando el modelo Flexbox
- Usando CSS Grid
1. Consultas de medios
Las consultas de medios le dicen al navegador web que ignore o reemplace las propiedades de la página web en función de atributos específicos como el ancho de la pantalla o si el usuario está imprimiendo.
@media (query) {
/* The browser will use the CSS rules within the curly braces when the query is true */
}
El siguiente ejemplo establece el padding-left y padding-right dentro de la clase more-padding si el ancho de la pantalla es menor o igual a 768 px.
@media screen and (max-width: 768px) {
.more-padding {
padding-left: 10px;
padding-right: 10px;
}
}
2. CSS Frameworks
Los marcos de trabajo CSS como Bootstrap , Material Design Lite y Foundation tienen clases CSS pre-construidas que simplifican la codificación del diseño responsivo. Estas clases funcionan como las clases estándar de HTML.
En este ejemplo, col-md-9 y col-sm-6 establecen el ancho de la etiqueta <div> función de si la pantalla es pequeña o mediana.
<div class="col-12 col-md-6"></div>
El marco de Bootstrap divide una fila en doce columnas. En el ejemplo anterior, <div> se extenderá a través de nueve o seis de ellos. El sistema de cuadrícula, que se muestra a continuación, es fundamental para que Bootstrap facilite el diseño receptivo.
