媒体查询的px单位值是否需要考虑小数点位？

问题解答 #

1. 考虑带小数的屏幕尺寸是完全正确的思路
   现在高DPI设备、浏览器缩放、手动拖拽窗口大小的场景非常普遍，视口宽度出现浮点数值是正常现象，断点设计必须覆盖这类场景，你的观察是对的。

另外先纠正你给出的第一份代码里的笔误：@media (max-width: 768px) and (min-width: 1023px) 是无效规则，最大值小于最小值永远不会触发，推测是写反了区间，我们按正常的min-width: 768px and max-width: 1023px的区间逻辑讨论。

2. 符合你需求的解决方案
   你不想用从小到大的min-width层叠方案，怕漏写覆写导致样式串到更大的屏幕，直接用区间隔离的写法就可以解决小数断点的问题，有两种实现方式：

• 兼容旧浏览器的写法：把max-width的断点设置为比下一个区间的min-width小0.02px，足够覆盖所有浏览器的精度计算误差，不会出现断点遗漏

/* 移动设备：覆盖所有小于768px的场景，包括767.5px这类小数宽度 */
@media (max-width: 767.98px) {
  color: blue;
}

/* 平板：768px ~ 1023.98px */
@media (min-width: 768px) and (max-width: 1023.98px) {
  color: red;
}

/* 普通桌面：1024px ~ 1439.98px */
@media (min-width: 1024px) and (max-width: 1439.98px) {
  color: blue;
}

/* 大屏桌面：1440px及以上 */
@media (min-width: 1440px) {
  color: yellow;
}

• 现代浏览器的简洁写法：用媒体查询range语法，不需要手动处理小数，边界判断更精准，可读性更高（兼容Chrome 104+、Firefox 109+、Safari 16.4+）

/* 移动设备：宽度 < 768px */
@media (width < 768px) {
  color: blue;
}

/* 平板：768px <= 宽度 < 1024px */
@media (768px <= width < 1024px) {
  color: red;
}

/* 普通桌面：1024px <= 宽度 < 1440px */
@media (1024px <= width < 1440px) {
  color: blue;
}

/* 大屏桌面：宽度 >= 1440px */
@media (width >= 1440px) {
  color: yellow;
}

两种写法都是完全隔离每个区间的样式，不会出现小屏幕样式串到更大屏幕的问题，符合你的使用习惯。

内容的提问来源于stack exchange，提问作者Gamrom