CSS 中@media 查询的标准断点是啥？ [关闭]

Posted 2023-03-06

【中文标题】CSS 中@media 查询的标准断点是啥？ [关闭]

【英文标题】：What are standard breakpoints for @media queries in CSS? [closed]CSS 中@media 查询的标准断点是什么？ [关闭]

【发布时间】：2019-05-26 22:51:57

【问题描述】：

所以我正在为当今所有不同的常用设备筛选许多不同的@media 查询，但是我发现如果我尝试以这种方式满足每个人的需求，我最终会得到一半的代码是 @media查询。

是否有任何标准化的@media 查询可以让我在三个@media 查询中满足大众的需求？一款用于手机，一款用于平板电脑，一款用于台式机/笔记本电脑？

@media only screen /* iPhone 6, 6S, 7 and 8 */
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)  

  

@media only screen /* iPhone 6+, 7+ and 8+ */
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)  

  

@media only screen /* iPad 3, 4 and Pro 9.7 */
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 2)  

  

@media screen /* Non-Retina Desktop/Laptop */
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 1)  

  

【问题讨论】：

欢迎来到 Stack Overflow！这个问题要么太宽泛，要么基于意见，要么需要讨论，因此对于 Stack Overflow 来说是题外话。如果您有具体的、可回答的编程问题，请提供完整的详细信息。

我基本上只有一个断点，最小宽度：768px。我认为（默认）下的任何东西都是小型设备，任何东西都是平板电脑、笔记本电脑或台式机。我也开始有为所有屏幕尺寸定制的雄心壮志，但我发现这并不是真正必要的，只是引起了问题。

一个非常广泛和主观的话题，不太适合 ***。

您的心态应该是针对一些平均宽度来覆盖 90% 的设备。一个流行的 WordPress 页面构建器只使用以下断点：360px、768px、1024px，这对我很有帮助。在这个早期阶段，您不应该考虑针对特定设备；只有当有明确的理由这样做时，例如您有一个销售新 iPhone 相关配件的网站...现在是调用 iPhone 特定样式的好时机，因为您希望为目标受众提供完美的演示。

【参考方案1】：

虽然这可能会让人自以为是，但我根据网站设计定义断点，而不是基于特定设备的某些固定宽度。

这是我的基本工作流程：

首先为桌面或移动设备创建网站布局。 根据您的第一个设计开始增加或减少您的宽度，并找到您的设计中断和看起来很糟糕的关键点。 将这些点分组为常见断点以减少断点的总数（例如，如果某件事情在 850 处中断，而另一个人认为在 900 处中断，我会考虑是否可以在同一个断点处更改它们。 避免做不会改变整体情况的小事。以后可以修改它们。这是经验带来的东西，因为很难事先知道某件事是次要的还是会对整体布局产生深远的影响。因此，如果您在第一个项目中不考虑这一点也没关系。

在以桌面为先的工作时，我不会为大型桌面进行设计，只是稍后在创建断点时合并它们，但这是一种偏好。

顺便说一句，不要在您的媒体查询或其他任何地方使用像素单位，除了边界半径等非常小的数字。这可以为您省去很多未来的麻烦和多余的工作。

【讨论】：

在这种情况下你建议我使用什么单位？

@Maximilian，我个人使用 rem （用于媒体查询、字体等，除了一些特殊情况，例如有时首选 fr 的网格或其他特殊情况下的 vh 和 vw ），他们从来没有让我失望，但是关于 rem 与 em 存在一些争论，我不能在最后一部分给你权威的答案。 rem 只需要在开始时进行一些设置，然后它就非常健壮和可靠。

这也是我的做法。好的一点是它可以变得固执己见，不同的人以不同的方式处理它。当布局中断时，添加断点。不同的布局在不同的地方中断，这就是为什么每个布局都需要（在我看来）一组不同的断点。某些布局甚至可能不需要任何布局，而其他布局可能需要很多。断点应该基于设计，而不是设备。

@Adam，是的，“基于设计，而不是设备”！我喜欢！