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

Question

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

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

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

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

我怎样才能做到这一点？

提前致谢

Answer 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

Answer 2

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

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

}