CSS中如何通过@media实现单一特定分辨率的样式匹配？

你之前试的两种精确分辨率匹配写法，语法本身完全符合CSS媒体查询规范，不生效根本不是写错了，是现代浏览器算出来的实际视口宽度，压根不会刚好等于你写的整数值：

• 浏览器自带的垂直滚动条会占走一块宽度，扣完滚动条的尺寸，实际给页面渲染的视口宽度往往是带小数的亚像素值（比如766.3px、767.1px），根本碰不上你设的width:767px、min/max-width:767px这类整值阈值
• 高DPI屏幕的逻辑视口宽度本身就是按亚像素算的，不会输出纯整数的固定值
• 手动拖窗口调大小的时候，渲染引擎实时给的视口宽度是连续的小数范围，根本不会刚好卡在767px这个整数点上

方案1：用带亚像素容差的极窄区间替代死卡整数的写法 #

别硬凑整数阈值了，把匹配范围收窄到目标分辨率上下0.5px的极小区间，既不会覆盖相邻分辨率的场景，又能兜住实际渲染产生的小数视口值：

@media (min-width: 766.5px) and (max-width: 767.5px) {
    #sp-logo {width: 33.33333333%;}
}

这个写法的实际覆盖范围，刚好对应原生视口为767px的所有渲染场景，不会误命中766px、768px这类相邻分辨率，比你之前测试能用的767px-768px区间范围窄一半，完全满足单分辨率匹配的需求。

方案2：搭配设备像素比条件缩小命中范围 #

如果你的匹配目标是特定物理分辨率的设备，不是单纯的浏览器视口宽度，可以在宽度匹配的基础上，加设备像素比的匹配条件，进一步过滤非目标场景的命中：

@media (min-width: 766.5px) and (max-width: 767.5px) and (resolution: 1dppx) {
    #sp-logo {width: 33.33333333%;}
}

注意：现代浏览器的视口宽度计算天生是亚像素级的，不存在100%刚好命中整数像素的场景，±0.5px的窄区间是前端开发里通用的兼容写法，不会带进去多余的样式误配。

内容的提问来源于stack exchange，提问作者nickname display none