媒体查询出现像素间隙问题：屏幕宽度临界点背景色异常

问题描述 #

我编写了如下响应式CSS代码：

/* Extra small devices (phones, 480px and down) */
@media only screen and (max-width: 480px) {
    body {
        background-color: red;
    }
}

/* Small devices (portrait tablets and large phones, 481px up to 769px) */
@media only screen and (min-width: 481px) and (max-width: 768px) {
    body {
        background-color: blue;
    }
}

/* Medium devices (landscape tablets, 769px up to 1024px) */
@media only screen and (min-width: 769px) and (max-width: 1024px) {
    body {
        background-color: green;
    }
}

/* Large devices (large laptops and desktops, 1025px up to 1440px) */
@media only screen and (min-width: 1025px) and (max-width: 1440px) {
    body {
        background-color: blueviolet;
    }
}

测试时发现，屏幕宽度切换到临界点时，背景色会先变为默认白色，再到下一个像素才切换到对应颜色：比如宽度小于480px时背景为红色，恰好480px时变为白色，增至481px时才变为蓝色。

问题原因 #

• 媒体查询区间存在未覆盖的像素间隙：你给每个区间的断点都设置了+1px的起始值（比如第一个到480px，第二个从481px开始），但浏览器的视口宽度可能出现小数（比如缩放、高DPI屏幕的像素换算），当宽度处于480px~481px之间（如480.5px）时，没有任何媒体查询能匹配，就会使用body的默认背景色（白色）。
• 即使是整数宽度，部分浏览器的渲染计算也可能出现偏差，导致临界点的匹配逻辑失效，触发默认样式。

修复方法 #

方法1：让区间连续衔接 #

把下一个媒体查询的min-width设为上一个的max-width，消除间隙：

/* Extra small devices (phones, 480px and down) */
@media only screen and (max-width: 480px) {
    body {
        background-color: red;
    }
}

/* Small devices (portrait tablets and large phones, 480px up to 768px) */
@media only screen and (min-width: 480px) and (max-width: 768px) {
    body {
        background-color: blue;
    }
}

/* Medium devices (landscape tablets, 768px up to 1024px) */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
    body {
        background-color: green;
    }
}

/* Large devices (large laptops and desktops, 1024px up to 1440px) */
@media only screen and (min-width: 1024px) and (max-width: 1440px) {
    body {
        background-color: blueviolet;
    }
}

注：当宽度恰好等于断点值时，后写的媒体查询会覆盖先写的（CSS优先级相同，后声明的生效），这符合响应式从窄到宽的递进逻辑。

方法2：采用移动优先写法（更推荐） #

先写小屏幕样式，再用min-width逐步覆盖大屏样式，天然避免区间间隙：

/* 默认样式（对应小屏幕，480px及以下） */
body {
    background-color: red;
}

/* Small devices (480px以上) */
@media only screen and (min-width: 480px) {
    body {
        background-color: blue;
    }
}

/* Medium devices (768px以上) */
@media only screen and (min-width: 768px) {
    body {
        background-color: green;
    }
}

/* Large devices (1024px以上) */
@media only screen and (min-width: 1024px) {
    body {
        background-color: blueviolet;
    }
}

/* Extra large devices (1440px以上) */
@media only screen and (min-width: 1440px) {
    /* 可补充更大屏的样式 */
}

这种写法不需要设置max-width，每个大屏样式自动覆盖小屏，完全消除临界点间隙，同时代码更简洁。

内容的提问来源于stack exchange，提问作者Nuho Zubaed Salam