css - 大屏手机断点

Question

我在我的 CSS 中使用手机优先的方法，断点为台式机/笔记本电脑的 980px。我如何调整此代码以确保大屏幕手机(例如分辨率为 1080 x 1920 的 HTC)显示手机设计？这是我的 CSS 的示例。谢谢。

div#navbar {
    display: none;
}

@media (min-width: 980px) {
    div#navbar {display: inline;width: 100%;text-align: right;padding-right: 50px;padding-top: 0px;}
    div#navbar ul {list-style: none;margin:0px 0px 0px 50px; padding: 0;overflow: hidden;}
    div#navbar ul li {float: left;font-family: 'Playfair Display', sans-serif;font-size: 16px;font-weight: 700;line-height: 20px;}
    div#navbar ul li a {padding: 0px 12px;color: #0d0d0d;text-transform: none;text-shadow: 1px 1px 1px #ffffff;}
    div#navbar ul li a:hover {text-decoration: none;color: #ffffff;text-shadow: 1px 2px 2px #000000;}
    #content {margin-top:115px;}
}

Answer 1

通常，您可以保持相同的媒体查询独立于物理屏幕分辨率。您不需要需要特别针对高分辨率屏幕调整维度媒体查询，除非处理不同分辨率的不同图像之类的事情。我将尝试解释原因。

CSS 像素不是物理像素。

手机的物理像素分辨率基本上无关紧要:媒体查询响应的是 CSS 像素，这是完全不同的东西。

这里有两件事需要跟踪:

• “理想视口(viewport)”大小。
• 您正在使用哪个视口(viewport)。

设备将有一个以像素为单位的“理想”视口(viewport)(从浏览器的 Angular 来看)，通常表示为物理屏幕尺寸的倍数。

例如:旧款 iPhone 3G 的设备像素比 (DPR) 为 1，屏幕的物理宽度为 320 像素。理想的视口(viewport)是 320 像素——这意味着您可以容纳 320 像素的内容。

高端手机可能有 960 像素宽的屏幕，DPR 为 3。因此，从 CSS 和媒体查询的 Angular 来看，它的视口(viewport)仍然被认为是 320 像素宽。在纵向模式下，大多数手机最终会在 300-500 像素范围内的某个地方拥有理想的视口(viewport)。

使用理想视口(viewport)。

注意:这取决于您实际上告诉浏览器使用理想的视口(viewport)——通常是通过使用像 <meta name="viewport" content="width=device-width,initial-scale=1"> 这样的元标记。 .如果您不这样做，大多数移动浏览器会假设您的网站不适合在小屏幕上查看，并缩小以使视口(viewport)假装成桌面大小的浏览器(大约 1000 像素宽左右)。然后，您的媒体查询将改为响应该虚假尺寸。

这是一个 very thorough presentation by PPK on the matter .