【问题标题】:Media query for 1440px width but not laptop screens?1440px 宽度的媒体查询,但不是笔记本电脑屏幕?
【发布时间】:2020-12-23 20:20:50
【问题描述】:

我正在尝试进行媒体查询以仅针对大型显示器屏幕将正文修复为 1440 像素,为此,我有以下代码:

@media (min-width:1440px) { 
     body {
       max-width:1440px
     }
}

此媒体查询工作正常,但我需要将其限制为特定尺寸的屏幕,例如 23 英寸。我不想在笔记本电脑屏幕上失去宽度。

我尝试使用 max-resolution 进行此操作,但似乎没有任何效果。

那么,我可以创建仅适用于特定物理尺寸屏幕的媒体查询吗?

谢谢!

【问题讨论】:

  • 媒体查询仅适用于分辨率而不是屏幕的物理尺寸。您必须根据分辨率调整代码。例如。 1920x1080 或 1366x768 等
  • @psychodeveloper 谢谢!但是有一种方法可以操纵这种媒体,使其仅在较大的屏幕上不应用一些 1440 像素的样式?因为我们可以在不同的显示器尺寸上使用 1920x1080。
  • 不,没有办法只操纵物理设备。物理设备的问题是,有些 23 英寸设备的分辨率为 1920 x 1080p,而有些设备的分辨率为 1440p。在这种情况下,您更愿意做什么?您只会在 23 英寸屏幕上瞄准 1440p 分辨率还是在 23 英寸屏幕上瞄准 1920p " 屏幕?这就是为什么我说调整屏幕的唯一方法是使用媒体查询和分辨率大小。我希望我已经澄清了你的观点。

标签: css media-queries screen-resolution mobile-development


【解决方案1】:

有趣的要求!您可以尝试在媒体查询中使用“分辨率”。

如果您采用建议的 23 英寸和 1440 像素的宽度,您会得到大约 62 dpi(每英寸点数)。

如果您的 dpi 较高,但最小宽度仍为 1440 像素,则您应该使用小于 23 英寸的屏幕。

试试看,如果它按预期工作,我会是古玩。

@media (min-width:1440px) and (max-resolution: 62dpi) { 
    body {
        max-width:1440px
    }
}

【讨论】:

    猜你喜欢
    • 2017-11-28
    • 1970-01-01
    • 2017-02-16
    • 2014-07-08
    • 2013-01-06
    • 1970-01-01
    • 1970-01-01
    • 2020-02-05
    • 1970-01-01
    相关资源
    最近更新 更多