TUTORIAL
COMO CREAR UN DISEÑO RESPONSIVO
- Creamos nuestro archivo.html
- Creamos nuestra estructura html:5
- Creamos un div con cualquier texto en el body y hacemos nuestra etiqueta de estilos
<Style>
div{
background: orangered;
}
</Style>
</head>
<body>
<div>AHORA TENEMOS DISEÑO RESPONSIVO</div>
</body>
Con el fin de que las imágenes y textos se vean correctamente en cualquier dispositivo, ya sea PC, celular o Tablet, utilizaremos la etiqueta:
@media(){
}
La cual nos permitirá poner un min (mínimo) y un max (máximo) de px para que dependiendo del dispositivo utilizado la pagina se vea de una forma predeterminada
<Style>
div{
background: orangered;
}
@media(min-width:300px){
div{
background: burlywood;
}
}
</Style>
</head>
<body>
<div>AHORA TENEMOS DISEÑO RESPONSIVO</div>
</body>
En este caso puntual, tenemos un mínimo de 300px por lo que abrimos la página en modo tableta o celular nos cambiara el color a medida que lleguemos a menos de 300px que fue lo que le dejamos como min (mínimo)
Hasta ese tamaño nos toma ese color, pero si achicamos el tamaño del dispositivo entonces quedará así:
Ya que tiene menos de 300px esa pantalla. Y a la inversa pasaría si lo colocamos como max (máximo)
Curso de Frontend Developer
