Mediaqueries dentro del responsive web design
Una herramienta muy útil en el diseño web sensible son los mediaqueries, estos nos permiten hacer cambios específicos ante algunas resoluciones especificas, por ejemplo un celular puede tener una resolución de 240X320 pixels, si nosotros contemplamos estas características para nuestro diseño de pagina nosotros nos podemos encontrar mínimo con dos soluciones: una seria realizar un diseño web especifico para móviles y un diseño para ordenadores, esto es muy complicado y costoso en recursos al pensar que por cada página de contenido se deben desarrollar dos formatos el web y el web móvil.
Como lo comente en el párrafo anterior la otra solución se dio con CSS3 y es la de hacer solicitudes especificas ante ciertas características de un dispositivo, para este articulo contemple un ejemplo anterior al cual le haremos algunos arreglos ante una resolución menor a 600 pixels de ancho la cual podría ser la de un smart phone.
Ahora tenemos el siguiente codigo html:
<!DOCTYPE html>
<head>
<title>RWD</title>
<link rel=”stylesheet” href=”./css/main.css” type=”text/css”>
<LINK REL=”Shortcut Icon” HREF=”./img/icon.ico”>
</head>
<body>
<header>
<h1>encabezado<h1>
</header>
<nav>
<ul>
<li><a href=”#”>inicio</a></li>
<li><a href=”#”>nosotros</a></li>
<li><a href=”#”>contacto</a></li>
</ul>
</nav>
<section id=”contenedor”>
<h2>
Secciones
</h2>
<article id=”imagen_contenedor”>
<img src=”./img/programador.jpg” id=”img_contenedor”></img>
</article>
<article id=”texto_contenedor”>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vulputate tellus id leo sollicitudin sit amet suscipit sapien suscipit. Curabitur pretium rhoncus velit vel faucibus. Quisque purus enim, varius sit amet congue at, commodo eget sem. Sed consectetur vehicula mattis. Nullam a dui erat. Mauris venenatis venenatis lobortis. Aliquam eleifend auctor enim, vel lacinia eros aliquam eu. Donec bibendum eleifend risus quis vulputate. Vestibulum tempus, quam at ornare dapibus, libero tellus commodo sem, ac tempus lorem orci feugiat sapien. Integer sagittis pulvinar posuere. Praesent consectetur massa ac enim luctus bibendum.
Nulla ligula purus, vestibulum et pellentesque in, molestie eu tortor. Vestibulum eget aliquet quam. Donec non molestie nisl. Suspendisse sit amet elit nisl. Vestibulum in magna arcu. Duis vitae consequat ante. Vivamus gravida feugiat augue ut tristique.
Sed non velit eu sapien mattis volutpat. Morbi posuere tellus hendrerit massa accumsan id mattis orci luctus. Pellentesque sodales faucibus aliquam. Donec interdum vehicula auctor. Nam neque lorem, congue ac volutpat id, pulvinar id mi. Vivamus odio metus, bibendum sed porta et, luctus eu nunc. Morbi feugiat ipsum ipsum, non congue elit. Ut feugiat, tellus iaculis interdum venenatis, lacus erat pellentesque felis, vitae placerat augue leo nec turpis. In et massa ac ante egestas cursus. Vivamus feugiat, neque eget vulputate dignissim, justo magna facilisis turpis, eu ornare neque augue ut ante.
Curabitur tristique sodales erat, cursus aliquam leo auctor id. Vivamus auctor scelerisque quam nec pretium. Mauris rhoncus sollicitudin mauris sit amet placerat. Quisque volutpat leo semper massa mollis consequat. Sed nisl orci, rutrum id faucibus eleifend, tincidunt eget magna. In eros lectus, tempus sit amet vehicula at, porttitor id arcu. Nunc tincidunt vestibulum ultricies.
Morbi arcu tellus, rhoncus eu volutpat sed, laoreet et risus. Ut accumsan scelerisque magna nec rhoncus. Quisque at velit sem, id aliquam lacus. Suspendisse egestas tincidunt felis in aliquet. Aenean et diam augue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed pulvinar semper eleifend. In neque nisl, ultricies at porttitor et, ullamcorper vel nisi. Etiam vel massa a neque hendrerit adipiscing. In et leo eget odio posuere rhoncus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent malesuada sem a mi lobortis vitae euismod erat pellentesque. Suspendisse varius bibendum lacus, non viverra mi porttitor sit amet. Duis adipiscing lobortis dolor, vitae sodales nisi condimentum non.
</article>
</section>
<footer>
<h2>pie de pagina</h2>
</footer>
</body>
</html>
Y tenemos el siguiente script CSS
*{
padding: 0px;
margin: 0 auto;
}
html{
height: 100%;
background: rgb(131, 131, 131);
}
body{
width: 90%;
height: 800pt;
margin: 0pt auto;
padding: 0.5em 0;
background: rgba(248, 248, 248, 0.8);
}
h1,h2,h3,h4,h5{
font-family: serif;
font-variant: small-caps;
text-align: center;
}
h1
{
font-zise:16pt;
}
h2
{
font-zise:14pt;
}
h3{}
h4{}
h5{}
h6{}
a {
text-decoration: none;
font-size : 20pt;
color: black;
}
a:hover {
color: white;
}
header{
max-width: 95%;
height: 90pt;
background: rgb(184, 184, 184);
padding: 5pt;
text-align: center;
}
nav{
max-width: 95%;
padding: 5pt;
height: 30pt;
margin:10pt auto;
background:rgb(124,124,124);
text-align: center;
}
nav ul {
margin: 1pt auto;
}
nav ul li {
height: 100%;
display: inline;
margin: 40pt;
}
#contenedor {
width: 90%;
height: 600pt;
background: white;
display: block;
}
#imagen_contenedor {
width: 40%;
height: 100%;
display: inline-block;
}
#texto_contenedor {
width: 55%;
height: 100%;
display: inline-block;
}
article{}
aside{}
footer{
width: auto;
height: 200pt;
min-width: 100%;
color:white;
background: rgb(85, 83, 83);
text-align: center;
}
Esto inicialmente no generara ningún cambio en la pagina, así que para implementar un media query utilizaremos la siguiente línea de código:
@media only screen and (max-device-width: 600px) {}
@media es la directiva que indica el inicio de una petición,
esta se acompaña de una o varias condiciones en este caso:
only screen and (max-device-width: 600px){}
Por ultimo lo que tenemos que hacer es ajustar todo el diseño para que funcione a la resolución que queremos en este caso a una resolución menor a 600px de ancho
para eso insertaremos el siguiente código:
@media only screen and (max-device-width: 600px) {
a {
font-size: 10pt;
}
body{
height: 1400pt;
}
#contenedor {
height: 1100pt;
}
#imagen_contenedor {
display: inline;
}
#texto_contenedor {
display: inline;
}
}
El navegador google crhome nos proporciona una herramienta muy útil para trabajar con diferentes resoluciones la forma de configurar es la siguiente :
1.- Entramos a herramientas de desarrolladores .
2.- En la sección inferior derecha está un pequeño engrane el cual es el de configuración.
3.- Buscamos la sección de overrides y seleccionamos el checkbox device metrics dentro de los campos screen resolution ingresamos los valores 400 y 800.
Obtendremos un cambio de esta manera.
A esta.
Así podemos hacer directamente los ajustes que necesitemos para diferentes resoluciones estándares, por ultimo te dejo una imagen con algunas resoluciones estándares en el mercado.
Leave a Reply