如何针对特定屏幕分辨率（如1366×768）应用CSS样式？

这个问题问得很到位——精准匹配特定屏幕分辨率确实比用常规的min-width/max-width要讲究细节，毕竟CSS的媒体查询默认是针对浏览器视口，而不是物理屏幕。下面给你几种靠谱的方案，按需选择：

1. 精确匹配浏览器视口尺寸 #

如果你想在浏览器窗口恰好是1366px宽、768px高时应用样式（比如用户手动调整窗口到这个尺寸，或无任务栏干扰的全屏状态），可以直接指定width和height的精确值：

@media screen and (width: 1366px) and (height: 768px) {
  /* 这里写你的专属样式 */
  body {
    background-color: #f5f5f5;
  }
  .content-container {
    max-width: 1200px;
    margin: 0 auto;
  }
}

注意：如果系统有任务栏、菜单栏等占用屏幕空间，浏览器全屏时的视口高度会小于768px，这种情况下这个查询不会生效。

2. 匹配物理屏幕分辨率（推荐） #

如果你的目标是所有屏幕硬件分辨率为1366×768的设备，不管浏览器窗口大小，就要用device-width和device-height——这两个属性针对的是屏幕的物理像素，不是浏览器视口：

@media screen and (device-width: 1366px) and (device-height: 768px) {
  /* 针对该屏幕设备的全局样式 */
  .sidebar {
    width: 280px;
  }
  .main-content {
    flex: 1;
    padding: 1.5rem;
  }
}

为了更精准，还可以加上像素比的判断（1366×768的设备一般是1倍像素比）：

@media screen and (device-width: 1366px) and (device-height: 768px) and (device-pixel-ratio: 1) {
  /* 进一步缩小匹配范围，排除高DPI的同尺寸设备 */
}

3. 兼容缩放与小范围调整的模糊匹配 #

如果用户可能调整浏览器缩放比例，或者窗口尺寸有微小偏差（比如差几个像素），可以用范围型的媒体查询来覆盖接近1366×768的视口：

@media screen and (min-width: 1360px) and (max-width: 1370px) and (min-height: 760px) and (max-height: 770px) {
  /* 适配接近目标尺寸的视口，兼容缩放或小幅度窗口调整 */
}

4. 匹配屏幕比例（可选） #

如果你只是想适配1366×768对应的比例（约16:9），而不纠结精确分辨率，可以用aspect-ratio属性：

@media screen and (aspect-ratio: 1366/768) {
  /* 匹配该比例的视口 */
}

注：aspect-ratio针对的是浏览器视口比例，如果要匹配设备屏幕比例，结合device-width/device-height会更可靠，因为旧的device-aspect-ratio属性已经被废弃。

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