Formulario para inscripción Diseño Web II.
__________________________________________
__________________________________________
Media Queries:Los media queries (o consultas de medios) permiten evaluar condiciones relacionadas con el entorno del dispositivo, como el ancho o el alto de la pantalla (width, height), y en base a esta información aplicar estilos específicos que permiten adaptar el diseño a diferentes tamaños de pantalla y dispositivos.
Ejemplo de la sintaxis:
@media (min-width: 600px){
}
min-width significa, a partir de esta medida o con este ancho como mínimo, aplicar estas propiedades.
Pensamos en hacer una estrategia como la de "Mobile First", es decir, primero para pantallas pequeñas como las de los teléfonos celulares, y luego ir adaptando a pantallas de mayor tamaño.
¿Cuáles son los Breakpoints?
Los Breakpoints o Puntos de Quiebre indican en qué tamaños de pantalla debe cambiar el diseño para adaptarse mejor al dispositivo del usuario (móvil, tablet, escritorio, etc.).¿Quién decide esos puntos?
Nosotros elegimos en que puntos cambiar el diseño, por ejemplo:
/* De 0 a 480 el diseño sin media queries
con las propiedades como veníamos trabajando anteriormente */
@media (min-width: 481px) {
/* desde 481px (tablet y celulares) */
}
@media (min-width: 769px) {
/* desde 769px (notebooks medianas) */
}
@media (min-width: 1280px) {
/* desde 1280px (Pantallas más grandes)
En este media queries podremos también limitar cuanto
crecerá como máximo de ancho nuestro diseño,
para evitar deformaciones.
aplicamos un selector (clase, id, etiqueta u otro)
a ese elemento le aplicamos un max-width, por ejemplo de 1400px
max-width: 1400px; */
}
Tendremos que ir probando los puntos en nuestro sitio y comprobando como se ve en los diferentes tamaños de pantalla, para esto podremos utilizar las herramientas para desarrolladores de Chrome.
___________________________________
TP:
.jpg)
___________________________________
Layout con Grid por Áreas:
Por un lado:
Al contenedor en el css además de las propiedades que ya tenga, le asignamos display grid, cantidad de columnas y filas, y luego organizamos las áreas.
(El contenedor puede ser body o un div)
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 50px 50px 100px 30px;
grid-template-areas:
"header"
"aside"
"main"
"footer";
Por otro lado:
Cada área debe tener asignado su nombre dentro de su selector.
Por ejemplo para el pie, asignarle grid-area: footer;
¡Todo esto es muy útil cuando queremos lograr aplicar un media query o varios, para que el layout se reorganice en función al ancho del dispositivo en el que se vea nuestra página!
