媒体查询断点像素规范

Question

我对Media Query断点应该是什么感到困惑。我习惯这样做的方法是让一个像素小于下一个断点，例如

@media screen and (max-width: 749px) {} //Mobile design CSS applies to everything until 74ppx
@media screen and (min-width: 750px) and (max-width: 969px) {}

etc.

但有些人会使用确切的值，例如

@media screen and (max-width: 750px) {}
@media screen and (min-width: 750px) and (max-width: 970px) {}

第二种方法不会破坏它吗？我的理解是第一种方法是走的路。

如果你做了像

这样的事情呢？

@media screen and (max-width: 750px) {}
@media screen and (max-width: 970px) {}

我希望所有的移动设计适用于750，但750是平板电脑视图开始的地方。对于970也是如此。在这种情况下，还有一个像素不正确吗？即最大宽度：749和最大宽度：969

Answer 1

是的，第一个是正确的。在第二个中，如果屏幕宽度恰好是750px，则将应用两个媒体查询部分，这可能会导致问题。

关于你的补充：

@media screen and (max-width: 750px) {}
@media screen and (max-width: 970px) {}

在这种情况下，第二个查询中的规则将覆盖第一个查询中具有相同CSS选择器的规则，这可能也会导致问题。

通常的方式是反过来（桌面第一种方法），或使用移动优先方法，首先说明移动尺寸的一般规则，然后添加更大尺寸的媒体查询，覆盖一般规则。那将是例如

@media screen and (min-width: 720px) {}
@media screen and (min-width: 1280px) {}