En español sería algo así como: «diseño web adaptable” o «diseño web flexible«.
Esta actualmente muy de moda en la web, y consiste en adaptar fácilmente el diseño de una web a los diferentes dispositivos que usamos para visitarla, como un ipad, iphone, smartphone, notebook, etc… utilizando los media queries de CSS3.
A continuación los pasos necesarios para adaptar nuestra web a un diseño flexible:
1. Meta tag
Usaremos el meta tag «viewport» para adaptar nuestra web a las diferentes resoluciones de los dispositivos móviles (Android, IOS, Blackberry OS…). De esta manera le decimos al navegador, que fuerze el ancho de la web al ancho de la pantalla:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
2. Compatibilidad con IE
Internet Explorer 8 y inferiores no es compatible con los media queries de CSS3, pero podemos utilizar alguno de los framework media-queries.js or respond.js para que si lo soporten. En este ejemplo voy a utilizar media-queries.js y ya será compatible con las versiones inferiores de IE 9:
<!--[if lt IE 9]> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]-->
3. Media Queries
Un ejemplo «básico» de estructura css de una web sería por ejemplo este:
#contenedor { width: 980px; margin: 0 auto; } #cabecera { height: 150px; } #contenido { width: 600px; float: left; } #lateral { width: 300px; float: right; } #pie { clear: both; height: 150px; }
Bien, ahora 2 sencillos ejemplos de media queries utilizando @media screen de css3:
a) Para resoluciones inferiores a 980px:
@media screen and (max-width: 980px) { #contenedor { width: 100%; } #contenido { width: 70%; } #lateral {width: 30%; } }
b) Para resoluciones inferiores a 700px:
@media screen and (max-width: 700px) { #contenido, #lateral { width: auto; float: none; } }
Todo esto es muy personalizable…, pero os servirá de base si estais empezando.
En el primer ejemplo adaptamos nuestro diseño a resoluciones inferiores de 980 pixeles, donde nuestros div principales se ajustan basados en porcentajes de ancho.
Y en el segundo ejemplo es para resoluciones inferiores a 700 pixeles, y lo que hacemos es quitar el flotamiento entre divs para que se coloquen uno encima del otro.
Agradezco tu comentario 🤘