Pasar al contenido principal

Modelo CSS para varios dispositivos

Descripción

Crea una hoja de estilos css, específica para dispositivos te permite corregir errores más rápidamente.

Instrucciones

Para diseñar tu web adaptable a varios dispositivos: 
  1. Descarga o copia el código que está debajo dentro de un archivo responive.css
     
  2. 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: {}
  3. 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) {

 

}
Copiar