css - 大型显示器上的不同显示

Question

我想在我的网站上有不同的显示。我已经处理过智能手机、平板电脑和台式机，但我想要大屏幕的东西，而且我不仅仅是在分辨率方面。我希望显示在 21 英寸以上的屏幕上有所不同。它在 15 英寸的笔记本电脑上看起来应该不一样，即使它们都具有相同的分辨率。

我已尝试使用基于像素密度的媒体查询，但得到的结果好坏参半，因此我不确定这是否是最佳方法。我试过这个:

@media screen and (max-resolution: 115dpi){
  /* CSS rules */
 }

虽然我没有得到我想要的结果。我在分辨率为 1920x1080 且像素密度为 94.53 的 23"显示器和分辨率为 1440x900 且像素密度为 127.68 的 13"MacBook 上进行测试>。然而，这两种设备的显示是相同的，但它似乎适用于其他一些分辨率不同的笔记本电脑。所以我很困惑。

我错过了什么？使用像素密度是最好的方法吗？否则我还有什么选择？

谢谢

Answer 1

您的媒体查询中似乎缺少一个表达式，它使用了 min-width 媒体功能:

The width media feature describes the width of the rendering surface of the output device (such as the width of the document window, or the width of the page box on a printer).

---

添加另一个 and 逻辑运算符，后跟 min-width 媒体功能和输出设备的宽度，通常以像素为单位。

---

示例:

@media screen and (min-width:1680px) and (max-resolution: 115dpi) {}