Descripción
Crea una hoja de estilos css, específica para dispositivos te permite corregir errores más rápidamente.
Para ver la explicación en video HAZ CLIC AQUI
Instrucciones
Para diseñar tu web adaptable a varios dispositivos:
- Descarga o copia el código que está debajo dentro de un archivo responive.css
- Si trabajar con Drupal, tendrás que añadir la librería dentro del .libraries de tu tema personalizado, respetando los espacios
global-styling: version: VERSION js: js/global.js: {} css: component: css/style.css: {} css/responsive.css: {} css/colors.css: {}
- Refresca caché para comprobar que tu tema está reconociendo la nueva hoja de estilos
Código
/* =======================================
MOVILES
=========================================*/
/* Telefonos en vertical (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
/* logo header */
}
/* Telefonos en horizontal (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) {
}
/* =======================================
TABLETS
=========================================*/
/* Tabletas y Ipod (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) {
}
/* =======================================
ESCRITORIO
=========================================*/
/* Ordenadores y Laptops (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199.98px) {
}
/* =======================================
EXTRA LARGOS
=========================================*/
/* Pantallas grandes (large desktops, 1200px and up) */
@media (min-width: 1200px) {
}