Web responsive con media queries | Adrenalina

Web responsive con media queries

css responsive media queries

Actualmente todo debe ser bueno para el SEO, y no hay absolutamente ninguna duda de que el hecho que una web sea responsive tiene un peso en los rankings de los SERPs.
La web responsive se asegura que las web móviles son muy parecidas a la que vemos con el navegador, simplemente se modifica la cantidad de información y la forma de navegar. Pero debemos tener en cuenta que el objetivo es aprovechar los beneficios de la adaptabilidad, no se trata de facilitar la programación.
Después de todo, la razón por la que las webs responsive són el estándar actualmente no és por que éstas den a los diseñadores y desarrolladores facilidades, sino por que hace los websites más accesibles consiguiendo una audiencia más grande. Por eso diseñar webs responsive sin perder de vista el SEO es tan importante.

Media queries

Las media queries son un módulo de CSS3 que permite que el renderizado de contenido se adapte a las condiciones en que se está visualizando nuestro trabajo. Gracias a éstas podemos averiguar cosas como la resolución de pantalla y actuar en consequéncia.

Sin embargo, y aunque la mayoria de navegadores dan buen soporte a las media queries, es recomendable usar las que están reconocidas por la gran mayoria de estos. Ya que eventualmente van apareciendo nuevas y excitantes queries pero en el diseño de webs responsive debemos centrarnos en lo verdaderamente importante, aprovechar los beneficios de la adaptabilidad.

Usando media queries en nuestro css

No es necesario usar múltiples hojas de estilo para todos los diferentes tamaños de pantalla y navegadores que los usuarios puedan utilizar. Sin embargo, si prefieres usar una hoja de estilo para cada diseño, puedes usar el siguiente código de ejemplo:

<link rel="stylesheet" media="screen and (max-width: 599px)" href="max_599.css" />
<link rel="stylesheet" media="screen and (min-width: 600px)" href="min_600.css" />
<link rel="stylesheet" media="print" href="print.css" />

Por otro lado podemos usar tantos media queries como queramos en nuestros archivos css.

@media screen {
body {
width: 70%;
}
}
@media print {
body {
width: 100%;
}
}

De la misma forma, también podemos usar media queries más avanzadas como:

@media all and (max-width: 599px) and (min-width: 400px), (min-width: 1199px) {
body {
background: blue;
}
}

Tipos de media queries

Como ya comentábamos antes, las media queries soportadas van cambiando, a continuación las más habituales.
Dimensiones
Obtienes la altura y anchura de la ventana actual del navegador, aceptan prefijos min/max que es el uso más común. También existe altura y anchura de dispositivo con min/max.

@media (min-device-width: 800px) { ... }

Orientación/Aspect Ratio

@media screen and (device-aspect-ratio: 16/9) { ... }

O si la pantalla está apaisada(landscape) o en vertical(portrait).

@media (orientation:portrait) { ... }

Color
Para saber si la pantalla es a color y detalles sobre esta.

@media (color) { /* Pantalla a color */ }
@media (min-color-index: 256) { /* Pantalla con al menos 256 colores */ }
@media (monochrome) { /* Pantalla monocromatica */ }

Lógica en las media queries

And, or y not

@media (min-width: 600px) and (max-width: 800px) {
html { background: red; }
}
@media (max-width: 600px), (min-width: 800px) {
html { background: red; }
}
@media not all and (max-width: 600px) {
html { background: red; }
}

Queries exclusivas
Por razones de organización y facilidad de lectura puede ser razonable hacer nuestras queries exclusivas

@media (max-width: 400px) {
html { background: red; }
}
@media (min-width: 401px) and (max-width: 800px) {
html { background: green; }
}
@media (min-width: 801px) {
html { background: blue; }
}

Sobreescritura
Nada nos impide que haya varias queries ciertas al mismo tiempo, de hecho a veces puede ser más eficiente usarlo a nuestro favor.En el ejemplo siguiente para una pantalla de 800px el fondo será azul.

@media (min-width: 400px) {
html { background: red; }
}
@media (min-width: 600px) {
html { background: green; }
}
@media (min-width: 800px) {
html { background: blue; }
}

Si invertimos el orden obtendremos que el fondo es rojo en lugar de azul para todos los anchos de más de 400px.

El diseño web responsive trata sobre todo de no perder de vista lo que es realmente importante. Por eso recomendamos mantenerse siempre aprendiendo y usar las consideradas mejores prácticas para crear websites efectivos y exitosos.

Autor: Lluis Torns

Estudiamos y analizamos su negocio en profundidad, definimos objetivos y planteamos la estrategia de marketing más adecuada centrándonos en conseguir cada uno de los objetivos propuestos. Solicita Presupuesto Ahora

Uso de cookies

En este sitio web utilizamos cookies propias y de terceros para mejorar nuestros servicios, para que usted tenga la mejor experiencia de usuario y analizar su visita. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.