Diseno web responsive se trata de crear páginas que sea visibles en todos los dispositivos
Una pagina web responsive se adapta de forma automatica al dispositivo de onde la estamos viendo
para crear una página web responsive tenemos que agregar el seguiente meta
Esto configurará la ventana gráfica de su página, que le dará al navegador instrucciones sobre cómo para controlar las dimensiones y la escala de la página.
Imágenes receptivas
imagenes receptivas son imagenes que escalan muy bien para adaptarse a cualquier tamano de navegador
Ponemos la propriedad width a 100% y la imagen responderá y escalará arriba y abajo
...Ejemplo de imagen a 100%
Codigo del ejemplo
Muchas veces la imagen no esta en la resolucion adecuada, asi que lo mejor es ponerla en una resolucion maxima
para eso tenemos el elemento max-width
Si usamos la propriedad max-width por veces la image se reduce pero la cualidad aumenta
ejemplo
Codigo del ejemplo
Mostrar diferentes imágenes según el ancho del navegador
El elemento picture permite defenir imagenes para diferentes tamanos de navegador
Si cambia de pantalla vera que la seguiente image se adapta a la pantalla del dispositivo
Tamaño de texto receptivo
Igual que las imagenes, el texto se puede configurar para que se vea en distintos tamanos dependiendo de cada dispositivo
la unidad vw lo que significa ancho de ventana grafica
Titulo responsive
Cambie el tamano de la pantalla para ver como se cambia el textp
Utilice la unidad "vw" al dimensionar el texto. 10vw establecerá el tamaño al 10% del ancho de la ventana gráfica.
Viewport es el tamaño de la ventana del navegador. 2vw = 2% del ancho de la ventana gráfica. Si la ventana gráfica tiene 50 cm de ancho, 2vw es 1 cm
Medios para redimensionar
ademas de redimensionar imagenes y texto, el uso de media querie sirve tambien para redimensionar páginas interas
El seguiente codigo, es una pagina completa, pero pequena.
si copiamos el codigo y hacemos una página con este codigo
si mramos la página en diferentes navegadores, vamonos a dar cuenta que la pagina se redimensiona sola
ejemplo del codigo
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing: border-box;
}
.menu {
float: left;
width: 20%;
text-align: center;
}
.menu a {
background-color: #e5e5e5;
padding: 8px;
margin-top: 7px;
display: block;
width: 100%;
color: black;
}
.main {
float: left;
width: 60%;
padding: 0 20px;
}
.right {
background-color: #e5e5e5;
float: left;
width: 20%;
padding: 15px;
margin-top: 7px;
text-align: center;
}
@media only screen and (max-width: 620px) {
/* For mobile phones: */
.menu, .main, .right {
width: 100%;
}
}
</style>
</head>
<body style="font-family:Verdana;color:#aaaaaa;">
<div style="background-color:#e5e5e5;padding:15px;text-align:center;">
<h1>Hello World</h1>
</div>
<div style="overflow:auto">
<div class="menu">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
</div>
<div class="main">
<h2>Lorum Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
<div class="right">
<h2>About</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
</div>
<div style="background-color:#e5e5e5;text-align:center;padding:10px;margin-top:7px;">© copyright w3schools.com</div>
</body>
</html>
0 Comentarios
Si desea contactar comigo, lo puede hacer atravez deste formulario gracias