4 de Junio 2022. La clase continúa con el desarrollo del código para los breakpoints. Se trabaja con todos los elementos del sitio para la resolución de 400px de ancho.
Las media queries actúan como contenedor de las reglas y selectores a aplicar, por lo tanto, todo lo que engloba empieza con la apertura de una llave y termina con el cierre de la misma. En cuanto a la sintaxis, una media query siempre comienza con el indicador de @media , seguido de un mediatype.
Este método que vamos a ver ahora es más interesante y es el que se usa habitualmente a nivel profesional. Consiste en incorporar los estilos en una construcción @media, donde se apliquen entre llaves todos los estilos que queremos para una consulta de medio dada.
Como puedes ver, tenemos la sentencia @media en la que podemos indicar entre paréntesis las condiciones que deben cumplirse para que se aplique esta mediaquerie. En este caso será para pantallas que tengan una anchura mínima de 500 píxeles.
Luego, entre llaves colocamos todas las reglas y atributos de estilos CSS que necesitemos aplicar en esta situación. Las reglas de estilos son las mismas que pondrías fuera de la estructura condicional. Cuando la sentencia entre paréntesis se evalúe como verdadera, se aplicarán todas ellas.
@media (min-width: 500px) {
h1{
margin: 1%;
}
.estiloresponsive { float: right;
padding-left: 15px;
}
