在顺序媒体查询中使用最大宽度和最小宽度的优点？

如果存在一系列明确的断点和相关媒体查询，并且每个媒体查询都会更改相同的属性，那么添加max-width值和min-width值是否有优势？在顺序媒体查询中使用最大宽度和最小宽度的优点？

例如是否有任何优势，使用：

@media (min-width: 300px) and (max-width: 599px) { 
    color: red; 
} 
@media (min-width: 600px) and (max-width: 999px) { 
    color: blue; 
} 
@media (min-width: 1000px) { 
    color: green; 
}

而不只是：

@media (min-width: 300px) { 
    color: red; 
} 
@media (min-width: 600px) { 
    color: blue; 
} 
@media (min-width: 1000px) { 
    color: green; 
}

为了澄清，我明白，我可以通过添加一个最小和最大宽度的目标范围内，但是我指的是断点是连续的并且基于宽度的情况。鉴于序列中的下一个值将覆盖（王牌）前，是否有任何理由显式声明范围。

来源

2014-12-05 Undistraction

指定min-width和max-width允许您创建相互排斥的规则块。优点是您可以按任意顺序指定媒体查询。缺点是你需要更频繁地重复CSS规则。例如：

/* order of media queries does not matter */ 
@media (max-width: 299px) { 
    #section-1 { display: none; } 
    #section-2 { display: none; } 
} 
@media (min-width: 300px) and (max-width: 599px) { 
    #section-1 { display: block; } 
    #section-2 { display: none; } 
} 
@media (min-width: 600px) { 
    #section-1 { display: block; } 
    #section-2 { display: block; } 
}

仅min-width或max-width指定允许您创建的规则块，可以级联跨多个断点。优点是你可以用最少的重复来实际编写CSS规则。缺点是媒体查询需要按升序（最小宽度）或降序（最大宽度）排序，否则需要you run into WTFs。例如：

/* mobile first */ 
#section-1 { display: none; } 
#section-2 { display: none; } 
@media (min-width: 300px) { 
    #section-1 { display: block; } 
} 
@media (min-width: 600px) { 
    #section-2 { display: block; } 
}

/* desktop first */ 
#section-1 { display: block; } 
#section-2 { display: block; } 
@media (max-width: 599px) { 
    #section-2 { display: none; } 
} 
@media (min-width: 299px) { 
    #section-1 { display: none; } 
}

来源

2014-12-05 14:15:12

我认为你对Q的回答比我的好*这个*。 – jbutler483 2014-12-05 14:21:04

从阅读许多行业博客和我有写我自己甚至博客文章，我们一般提供样品，只有两个条件：屏幕和最大宽度。例如：
@media only screen and (max-width: 640px) {...} 
该语句将包括一个屏幕（显示器或装置）和任何宽度小于640像素。混淆权利？特别是考虑到我们最近的电子邮件模板，我们使用了两个断点的组合。例如：
@media only screen and (max-width: 640px) {...} 
@media only screen and (max-width: 479px) {...} 
我没有意识到这一点的时间，但在上面的例子中，第二媒体查询居然胜过第一，由于标准的CSS继承规则。按照权利，第一次触发任何宽度小于 640px的设备，第二次触发任何宽度小于479px的设备。所以如果你真的想要第一个，你需要确保在第二个条件下覆盖所有的CSS属性。

〜SOURCE

的，则返回 'device width' 是基于所述设备的方位。它不是基于设备可以在任何方向上支持的最高'可能尺寸'。

同样，术语“最大宽度”是导致我最初混淆的原因。某些设备根据方向和/或缩放级别返回不同的值，其他设备返回相同的值。无论哪种方式，在任何给定时间只返回一个“宽度”值，它不是基于一系列值。

来源

2014-12-05 14:10:54 jbutler483

我不明白这是如何回答我的问题。我不是问'min-width'和'max-width'是做什么或是什么意思。 – Undistraction 2014-12-05 14:12:04

不，你是（IMO）问'为什么使用它们'。这（我感觉），给出了为什么的一般概述，因为这意味着你可以通过使用范围来应用它们，而不是'在xyz px'或'over abc px' – jbutler483 2014-12-05 14:15:15

其最大宽度的好处是，你不必后覆盖样式。在下面的示例中，600px-999px范围的样式可以按照想要的样式进行样式设置，而不用担心必须从较小的媒体查询中覆盖css。媒体查询的替代级联不是这种情况。这取决于你喜欢做什么。

@media (min-width: 300px) and (max-width: 599px) { 
    h1 { 
     color: blue; 
     font-size: 40px; 
     text-transform: uppercase; 
    } 
} 
@media (min-width: 600px) and (max-width: 999px) { 
    h1 { 
     font-size: 10px; 
     } 
}

此外，如果浏览器开发人员工具中没有多余的overrode样式，它将更容易调试。

来源

2014-12-05 17:19:47

在顺序媒体查询中使用最大宽度和最小宽度的优点？

回答

相关问题