Fiz um pouco diferente e surgiu uma dúvida: como faço para delimitar o max-width e o minimo no mesmo @media
Tentei assim
@media only screen and (min-width:300px) and (max-width:700px)
e assim
@media only screen and (min-device-width:300px) and (max-device-width:700px)
mas nenhum dos dois funcionam.
Olá Matheus, tudo bem?
Que estranho, tem certeza que as mudanças dentro do media estão fazendo sentido ?
Pois apenas a combinação de (min-width: 300px) com (max-width) já era para conseguir criar um intervalo
Para demonstrar isso eu fiz até um exemplo bem simples:
<body class="flex">
<style>
* {
border: 0;
margin: 0;
}
.flex {
display: flex;
align-items: center;
justify-content: center;
}
body {
height: 100vh;
width: 100vw;
}
#base {
height: 300px;
width: 300px;
background-color: blue;
color: white;
font-size: 2em;
font-family: Arial, Helvetica, sans-serif;
text-transform: uppercase;
font-weight: bold;
}
</style>
<style>
@media (min-width:500px) and (max-width:700px){
#base {
background-color: green;
}
}
@media (min-width: 701px) and (max-width: 1200px){
#base {
background-color: rebeccapurple;
}
}
</style>
<div id="base" class="flex"></div>
<script>
const changeValues = () => {
const height = document.documentElement.clientHeight;
const width = document.documentElement.clientWidth;
base.innerHTML = `Altura: ${height} <br> Largura: ${width}`;
}
window.addEventListener("resize", changeValues);
changeValues();
</script>
</body>Com esse exemplo teremos corretamente:
Então, o que eu penso é que talvez a mudança dentro do media esteja talvez, pegando elementos errados, ou coisa do tipo
Abraços e Bons Estudos!