如何在大于 17 英寸的屏幕上显示不同的内容？

Posted 2023-03-06

【中文标题】如何在大于 17 英寸的屏幕上显示不同的内容？

【英文标题】：How can I display different content on a screen larger than 17 inches?

【发布时间】：2015-06-21 14:11:46

【问题描述】：

我有一个 wordpress 网站，我的网站主页上有内容。

当我在更大的屏幕上打开我的网站时，它看起来不太好，而 17 英寸是使我的内容看起来可以接受的最大屏幕尺寸。

我想针对 19、20、21、22 等英寸的屏幕尺寸显示不同的内容。

我的网站是：https://hughesjobs.net

我怎样才能做到这一点？

提前致谢

【问题讨论】：

developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

您可以在 CSS 中为此使用媒体查询，但这取决于分辨率而不是屏幕大小

不知道，英寸是 CSS 中的一个有效度量，我认为它可能会起作用。- developer.mozilla.org/en/docs/Web/CSS/length

您可以使用 css 媒体查询。如果你愿意，你可以使用 javascript——不像媒体查询那么优雅。您还可以使用 javascript 检测设备 - 但不是很推荐。

对于超过 17 英寸的屏幕尺寸，我应该使用什么确切的分辨率

【参考方案1】：

您可以使用 CSS 媒体查询为特定屏幕尺寸的元素添加特定样式。但是，我建议您使用英寸以外的其他东西作为您的度量单位。 From MDN:

对于低dpi设备，单位px代表物理参考 像素和其他是相对于它定义的。因此，定义了 1in 96px 等于 72pt。这个定义的结果是 在此类设备上，长度以英寸 (in)、厘米 (cm) 为单位， 毫米 (mm) 不一定与身体的长度相匹配 同名单位。

对于高 dpi 设备，英寸 (in)、厘米 (cm)、毫米 (mm) 被定义为它们的物理对应物。因此 px 单位是 相对于它们定义（1 英寸的 1/96）。

此外：

中的单位不代表屏幕上的物理英寸，而是 代表 96 像素。这意味着无论什么是真正的屏幕像素 密度，假设为 96dpi。在具有更大像素的设备上 密度，1in 将小于 1 物理英寸。同样毫米，厘米， 和 pt 不是绝对长度。

一些具体的例子：

1in is always 96px,
3pt is always 4px,
25.4mm is always 96px.

Reference

更新

这是一个如何使用媒体查询来定位大于 19 英寸的屏幕尺寸的示例（提醒：我不建议在媒体查询中使用英寸）：

@media all and (min-width: 19in) 
  #header 
    display: none;
  

在上面的例子中，当屏幕宽度大于 19 英寸（或同等宽度）时，id 为“header”的元素将被隐藏。

有关媒体查询的更多信息：

MDN: CSS Media Queries Google: Use CSS media queries for responsiveness CSS3 Media Queries

【讨论】：

好的，那么我将如何为更大的屏幕尺寸（如 19 英寸）编写媒体查询......你能举个例子......当我使用更大的屏幕尺寸 @media 不会两者兼而有之内容还会显示吗？

@chris 我在编辑的答案中添加了一个示例以及更多参考资源。

【参考方案2】：

您可以在样式表中添加媒体查询，如下例所示：

@media only screen and (min-width : 1920px) 
 #content
    /* Your style */