Diseño Responsable

Se habla en casi todos los ambientes relacionados con la Web de “Diseño Responsable”…
Hay bastantes frameworks que se encargan de generar código para realizar el trabajo.
La pregunta sería: ¿Es necesario todo ese despliegue para “nada”?.
La respuesta es: NO. Vamos a demostrarlo con un sencillo ejemplo:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv=”Content-Typecontent=”text/html; charset=iso-8859-1” />
<style type=”text/css“>
body {
margin: 0px;
text-align: center;
font: normal normal 1em/1em Helvetica, sans-serif;
}

@media all and (max-width: 640px) {
#wrap .bloq {
display: block !important;
width: auto !important;
}
}

#wrap .bloq {
display: inline-block;
height: 240px;
width: 240px;
margin: 20px;
background: #D0D0D0;
border: 1px solid #000000;
}
</style>
</head>
<body>
<div id=”wrap“>
<div class=”bloq“><b>[Texto | Imagen]</b></div>
<div class=”bloq“><b>[Texto | Imagen]</b></div>
<div class=”bloq“><b>[Texto | Imagen]</b></div>
<div class=”bloq“><b>[Texto | Imagen]</b></div>
</div>
</body>
</html>

Con menos de 1Kb. es suficiente para empezar. Seguiremos hablando de “Diseño Responsable”; con pocas palabras, y menos código.
¡Es todo, por ahora!.
Ah, redimensiona la ventana para ver el efecto.

Diseño Responsable

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s