Modelo CSS para varios dispositivos

webmaster — Tue, 28 Feb 2023 19:45:04 +0000

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

webmaster Mar, 28/02/2023 - 20:45

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

/* =======================================
            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) {

 

}

Paginador

Categoría

Portada