大显示器上的不同显示答案

【问题标题】：Different display on large monitors大显示器上的不同显示
【发布时间】：2017-02-23 00:58:12
【问题描述】：

我想在我的网站上有不同的显示。我已经处理过智能手机、平板电脑和台式机，但我会处理大屏幕，而且我说的不仅仅是分辨率。我希望 21 英寸以上的屏幕上的显示有所不同。即使分辨率相同，15 英寸笔记本电脑上的显示也不应该相同。

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

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

我没有得到我想要的结果。我正在一台分辨率为 1920x1080 且像素密度为 94.53 的 23 英寸显示器和一台分辨率为 1440x900 且像素密度为 127.68 的 13 英寸 MacBook 上进行测试。但是，两种设备上的显示是相同的，但它似乎可以在其他一些具有不同分辨率的笔记本电脑上工作。所以我越来越糊涂了。

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

谢谢

【问题讨论】：

你想达到什么结果？
@SergeyDenisov 我不确定我是否理解这个问题。我想为具有一定尺寸的显示器编写不同的 CSS 规则，而且我说的不仅仅是分辨率。
您可以使用em 单位吗？
@PascalGoldbach 你能详细说明一下吗？
我找到了这个链接：css-tricks.com/optimizing-large-scale-displays 它解释了如何在大屏幕上优化网站。

标签： css media-queries responsive

【解决方案1】：

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

宽度媒体特征描述了渲染表面的宽度输出设备（例如文档窗口的宽度，或打印机上页框的宽度）。

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

示例：

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

【讨论】：

【解决方案2】：

人们使用它来提供高分辨率图像，并且仍然可以在桌面显示器上检测到。

为确保移动设备以设备的宽度呈现页面，您需要添加视口元标记：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

人们仍然使用 @media all 和 (max-width: 320px) 查询视口的原因是，无论像素密度如何，320 像素仍然是 320 像素。大小相同。

【讨论】：