如何在具有高密度移动设备屏幕的 CSS 媒体查询中使用最小宽度和最大宽度

Question

我正在响应式设计领域迈出第一步。我发现最推荐的方法是使用 min-width 和 max-width 来找出显示区域的大小，像这样：

@media (max-width: 1200px) { ... } /* for desktops */
@media (max-width: 991px) { ... } /* for laptops */
@media (min-width: 768px) and (max-width: 990px) { ... } /* for large tablets */
@media (max-width: 768px) { ... } /* for smaller tablets */
@media (max-width: 500px) { ... } /* for cellphones */

问题是较新的 phone 具有高密度屏幕。我的 phone 的宽度为 980px。因此它加载错误 CSS 这意味着更大的屏幕。

我试过了max-device-width。它考虑了逻辑像素，我的 phone 宽度是其中的 393。有效。但是 max-device-width 已被弃用，所以我不想使用它。

我也找到了一些 min-resolution 和 max-resolution 的例子。

也可以用JavaScript判断浏览器是不是手机浏览器，但好像不是正确的做法。

所以我有点困惑。请给我一些提示，我应该使用什么以及如何确定该站点在移动设备上是否运行以及如何为其加载正确的 CSS。必须如何以正确可靠的方式完成？

提前致谢。

Answer 1

对于响应式设计，建议使用移动优先方法。您从移动版本的样式开始，并在视口增长时更改它。

对于以下媒体查询，您会遇到不同的问题：

@media (max-width: 1200px) { ... } /* for desktops */
@media (max-width: 991px) { ... } /* will match laptops and desktop because your screen with is underr 991 but also under 1200px */
@media (min-width: 768px) and (max-width: 990px) { ... } /* for large tablets */
@media (max-width: 768px) { ... } 
@media (max-width: 500px) { ... }

正确的做法应该是

// you start with mobile version
@media (min-width: 500px) { ... } // will match only screen width >= 500px
@media (max-width: 768px) { ... } // will match only screen width >= 768px
@media (min-width: 768px) and (max-width: 990px) { ... } // will match only screen width >= 768px and < 900px (could be tablets also)
@media (min-width: 991px) { ... } // match also ipad on landscape mode
@media (min-width: 1200px) { ... } /* for desktops */

Answer 2

首先，您使用它的方式不会很好。例如：

@media (max-width: 1200px) { ... } /* for desktops */
@media (max-width: 991px) { ... } /* for laptops */

如果屏幕的宽度为 900 像素，则两种媒体查询都适用。因为900px低于1200px，低于991px。对于该特定情况，您的媒体查询应如下所示：

/* for desktops */
@media only screen 
  and (min-width: 1367px) { 
    ...
}

/* for laptops */
@media only screen 
  and (min-width: 991px) 
  and (max-width: 1366px) { 
    ...
} 

/* for large tablets */
@media only screen 
  and (min-width: 769px) 
  and (max-width: 990px) { 
    ...
} 

/* for smaller tablets */
@media only screen 
  and (min-width: 481px) 
  and (max-width: 768px) { 
    ... 
} 

/* for cellphones */
@media only screen 
  and (max-width: 480px) { 
    ...
}

正如您所注意到的，它应该包含最小和最大宽度，除非它的底部或顶部（桌面和智能phones）最小的智能phone尺寸是 320px 顺便说一句。此外，我将媒体查询更改为仅屏幕，这是一个很好的做法，因为您只想处理屏幕。

屏幕尺寸：注意硬件像素和视口像素之间的区别。您的 phone 可能有超过 900 个硬件像素，但只有一半或四分之一是视口像素。硬件像素是设备物理上具有的像素，视口像素是可以被 css 装饰的像素。原因是，ahdrware 像素实际上不可寻址是为了清晰度。此外，它在其他方面几乎是不可读的。

编辑：便宜的笔记本电脑屏幕面板的分辨率为 1366 x 768 像素。所以笔记本电脑的宽度也应该设置为1366px。

Answer 3

设备像素和 CSS 像素之间存在差异。在许多屏幕上，它们的处理方式相同，但在高 DPI 屏幕上，每个 CSS 像素可能有多个设备像素。 See this page on MDN 阅读更多。

要以 CSS 像素为单位控制宽度，请在 HTML 中使用 viewport 元标记。此标记通常只在移动设备上解释，因此它不会影响您在桌面浏览器上的网站。它指定显示您的网站的最小宽度。

例如，要将您的网站设置为在移动设备上以最小宽度 500 像素显示，请使用：

<meta name="viewport" content="width=500, initial-scale=1">

要以浏览器的宽度显示站点，请使用：

<meta name="viewport" content="width=device-width">

除了 MDN 文章外，the following article 可能有助于设置平板电脑的显示宽度。

如何在具有高密度移动设备屏幕的 CSS 媒体查询中使用最小宽度和最大宽度

How to use min-width and max-width in CSS media queries with high density mobile device screens

html

css

responsive-design