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

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

这是我的基本工作流程：

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

首先在桌面上工作时，我不为大型桌面设计，而是在以后创建断点时将它们合并，但这是首选。

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

CSS中@media查询的标准断点是什么？

1 个答案: