He revisado estos articulos ¿Cómo tengo que situar los media-queries para diseño responsive? y ¿cuál es la sintaxis correcta de las media queries? entre ellos , las respuestas solo hacen referencia a el uso de min-width
y max-width
solo explicando un solo tema y no ambos.
Cuando se usa ambas @media quieres, como debe ser su estructura correcta:
En el caso de min-width
de menor 750
a mayor 992
o al contrario.
Ejemplo:
@media (min-width: 768px) {
.container {
width: 750px;
}
}
@media (min-width: 992px) {
.container {
width: 970px;
}
}
Y en el caso de min-width
de mayor a menor o al contrario.
Ejemplo:
@media (max-width: 1200px){
.grid-left {
float: left;
width: 100%;
}
}
@media (max-width: 991px){
.grid-left {
float: left;
width: 70%;
}
}
Entre sus combinaciones en solo documentos style.css cual se situa primero el min-width
o el max-width
Así: o viceversa:
@media (max-width: 1200px){
.grid-left {
float: left;
width: 100%;
}
}
@media (max-width: 991px){
.grid-left {
float: left;
width: 70%;
}
}
@media (min-width: 768px) {
.container {
width: 750px;
}
}
@media (min-width: 992px) {
.container {
width: 970px;
}
}