Question

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

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

我想为屏幕尺寸显示不同的内容，例如19,20,21,22等英寸。

我怎样才能做到这一点？

提前致谢

Answer 1

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

对于低dpi设备，单位px表示物理参考   像素和其他像素是相对于它定义的。因此，定义了1in   为96px，等于72pt。这个定义的结果是   在这些设备上，长度以英寸（in），厘米（cm）为单位，   毫米（mm）不必与物理长度相匹配   具有相同名称的单位。

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

此外：

单位不代表屏幕上的物理英寸，但是   代表96px。这意味着无论真正的屏幕像素是什么   密度，假设为96dpi。在具有更大像素的设备上   密度，1in将小于1物理英寸。同样mm，cm，   和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;
  }
}

在上面的例子中，带有id＆＃39;标题的元素＆＃39;当屏幕宽度超过19英寸（或等效）时，将隐藏。

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

Answer 2

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

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

}

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

2 个答案: