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

Question

所以我正在为当今所有不同的常用设备筛选许多不同的@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)  {

  }

Answer 1

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

这是我的基本工作流程：

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

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

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