Início / coding / Perguntas / 79567616
Accepted
ricardorios
Asked: 2025-04-11 05:35:45 +0800 CST

consultas de mídia não funcionam em CSS/SASS de largura de pixel específica

  • 772

Eu tenho essas 2 consultas de mídia

@media all and (max-width: 1199px) {
    // CSS
}

@media all and (min-width: 1200px) {
    // CSS
}

Ao testar isso, funciona bem, mas ao testar, apenas em 1199px o CSS não funciona, mas funciona de 1px a 1198px e de 1200px

Posso ter algumas dicas?

Inspecionando, alterando os pontos de interrupção, testado em diferentes navegadores

css

1 respostas

  1. Best Answer

    Posso reproduzir quando meu nível de zoom estiver estranho, como por exemplo 110% (em um monitor retina, o que dá um dPR de 2,222).

    const frame = document.querySelector("iframe");
const input = document.querySelector("input");

input.oninput = e => frame.style.width = input.value + "px";
input.oninput();
    <iframe srcdoc="
<style>
body { height: 100vh }
@media all and (max-width: 1199px) {
   body { background: red }
}

@media all and (min-width: 1200px) {
   body { background: green }
}
</style>
<h1>Hello<h1>
"></iframe>

Frame size: <input type="number" value="1200">

    Isso acontece porque ambos min-widthe min-heightsão inclusivos, então quando em um zoom ímpar a largura real não é um valor de pixel inteiro, ela ficará entre seus 2 valores.

    Para evitar isso, você pode usar a sintaxe do recurso de intervalo de consulta de mídia value < widthque value <= widthpermite definir intervalos inclusivos e exclusivos:

    const frame = document.querySelector("iframe");
const input = document.querySelector("input");

input.oninput = e => frame.style.width = input.value + "px";
input.oninput();
    <iframe srcdoc="
<style>
body { height: 100vh }
@media all and (width < 1200px) {
   body { background: red }
}

@media all and (width >= 1200px) {
   body { background: green }
}
</style>
<h1>Hello<h1>
"></iframe>

Frame size: <input type="number" value="1200">

    • 1

relate perguntas