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) {
}