Personalizar una plantilla Responsive con CSS

Personaliza cualquier plantilla propuesta en el manager gracias a los estilos CSS. A veces, el formulario de personalización simple no cubre todos los aspectos gráficos de tu página. Si quieres una personalización más avanzada deberás escribir algunas normas en CSS. Harás que tu página sea más original y bonita. Los internautas disfrutarán así de una mejor experiencia web.

El principio de un sitio web Responsive es que se pueda adaptar a todos los formatos de pantalla. Gracias al CSS podemos modificar la apariencia de un elemento en función del tamaño de la pantalla.
Es importante que te preguntes antes ¿Qué tipo de pantalla estará afectada por este estilo? Si la respuesta no es ¡Todas las pantallas!, tendrás que adaptar tu estilo CSS a un tipo de pantalla predefinida.

Aquí tienes un ejemplo de las principales resoluciones evaluadas en CSS para definir en que tipo de pantalla se muestra una página web.

Imagina que deseas esconder el encabezado de tu sitio, pero solamente en las pantallas pequeñas (smartphones). A partir de las resoluciones que acabamos de ver, esto significa : “Esconder mi encabezado en todas las pantallas con un ancho inferior o igual a 480px de largo”. En lenguaje CSS, esto se traduce así :

@media(max-width: 480px){
header{ display: none;
}
}

Hemos recurrido aquí a un @media query, este indica al navegador bajo que condición debe ejecutar el estilo CSS. Cuando lee esta línea, el navegador entiende que todos los estilos incluidos dentro de este @media query solo se deben aplicar cuando la pantalla tenga un ancho máximo de 480px (= max-widht: 480px).

Supongamos ahora que deseas definir una altura de 200px para tu encabezado solamente en las pantallas de tamaño medio (tabletas, pantallas de escritorio pequeñas), dicho de otra forma: “Mostrar mi encabezado únicamente en las pantallas que de ancho hagan entre 768px y 1199px”. En CSS, se traduce así :

@media (min-width: 768px) and (max-width:1199px){
header{ height: 200px;
}
}

Por último, imagina que quieres aumentar la talla del texto de tu encabezado solamente en las pantallas grandes (17” y más), dicho de otro modo: “Aumentar el texto de mi encabezado únicamente en las pantallas con un ancho superior o igual a 1200px”. El CSS correspondiente es :

@media (min-width: 1200px){
header{ font-size: 2rem;
}
}

Quédate con la idea de que los estilos CSS son concebidos para una anchura de pantalla por defecto. Haz clic en este enlace para ver la tabla de las principales resoluciones evaluadas en CSS para definir en que tipo de pantalla se muestra una página web. Todos los estilos CSS no adaptados a este tamaño deberán lógicamente figurar en un @media query correspondiente.

Plantillas [Bootstrap]

En las Plantillas [Bootstrap] este ancho por defecto es de 980px. Tu hoja de estilo podrá configurarse de esta forma :

/* Estilos por defecto (pantalla de escritorio) */
... 
/* Pantalla grande y resoluciones superiores */ 
@media (min-width: 1200px) { ... }
/* Tabletas en posición vertical */
@media (max-width: 768px) { ... }
/* Smartphone en posición horizontal y resoluciones inferiores */
@media (max-width: 480px) { ... }
/* Smartphone en posición vertical */
@media (max-width: 320px) { ... }

Los estilos son declarados en un orden decreciente, de mayor a menor anchura. Todos los estilos de CSS no optimizados para la anchura por defecto (980px) deberán figurar en los @media-queries correspondientes.

Plantillas [EMS framework]

Para las plantillas [EMS framework], la anchura por defecto es de 320px. Tu hoja de estilo podría parecerse a esto :

/* Estilos por defecto (smartphone en posición vertical) */
... 
/* Smartphone en posición horizontal y resoluciones superiores */
@media (min-width: 480px) { ... }
/* Tableta en posición vertical y resoluciones superiores */
@media (min-width: 768px) { ... }
/* Tableta en posición horizontal y resoluciones superiores */
@media (min-width: 992px) { ... }
/* Pantalla grande y resoluciones superiores */
@media (min-width: 1200px) { ... }

Aquí, los estilos aparecen en orden creciente, de más pequeños a más grandes. Todos los estilos no optimizados para que se muestren en formato Mobile (320px) deberán figurar en los @media-queries correspondientes.

Claro que, nada te obliga a respetar esta lógica de organización cuando escribes los estilos CSS. Sin embargo, por cuestiones de lectura y de compatibilidad con los estilos concebidos por el Web Designer de emiweb, te aconsejamos que respetes este principio.

También, puedes limitar los puntos de interrupción y así, determinar con más precisión una resolución :

/* Estilos por defecto (smartphone en posición vertical) */
... 
/* Entre smartphone en posición horizontal y la Tableta en posición vertical */
@media (min-width: 480px) and (max-width: 991px) { ... }
/* Entre tableta en posición horizontal y Pantalla de escritorio */
@media (min-width: 992px) and (max-width: 1199px) { ... }
/* Pantalla grande */
@media (min-width: 1200px) { ... }

No hace falta que trabajes con un smarphone, una tableta y un ordenador al mismo tiempo para probar el buen funcionamiento de los @media queries! Para simular la anchura de una pantalla, sólo tienes que reducir o aumentar la talla de la ventana de tu navegador. En función de su tamaño y de los Break Points, verás cómo se aplican los estilos correspondientes.

El navegador Chrome permite desde la Consola (haz clic en F12 para mostrarla) hacer una simulación de la página web en diferentes terminales : Smartphones, Tabletas, etc…

Te habrás dado cuenta de que, los @media queries son indispensables cuando queremos que nuestra página sea de fácil lectura y accesible en todo tipo de pantallas disponibles. El diseño y el contenido deben adaptarse en cualquier circunstancia, en una pantalla grande o en una pequeña. No te olvides nunca de este aspecto cuando personalices tu página con CSS!