在前端开发中，使用 SASS 编译器进行 CSS 预处理已成为常态。而媒体查询功能也被广泛应用于响应式设计中。但是，有时候在编写 SASS 媒体查询时，会遇到最大宽度和最小宽度取值的错误，导致样式无法正常应用。本文将为你深入解析这个问题，并提供解决方案。
问题原因
在 SASS 中，我们可以通过 @media 来定义媒体查询。例如以下代码定义了一个屏幕最大宽度为 768px 的媒体查询：
@media screen and (max-width: 768px) {
}其中，max-width 指定了媒体查询中的屏幕最大宽度。但在实际使用中，有时候我们会遇到这样的问题：当屏幕宽度在某个值 A 以上时，样式没有按照我们的预期应用。
这是因为，CSS 中的媒体查询条件是包含了边缘大小的。也就是说，当指定一个元素最大宽度为 768px 时，实际匹配到样式的元素宽度范围是 0 ~ 767px。
因此，当我们想要设计一个在 768px 以上启用的样式时，应该使用 min-width:769px。
同样地，在最小宽度媒体查询中也会遇到类似的问题。例如以下代码定义了一个屏幕最小宽度为 768px 的媒体查询：
@media screen and (min-width: 768px) {
}但如果你的样式表中定义了一个容器宽度为 768px 不包括边框及内边距的元素，那么这个媒体查询将无法匹配到相应的元素。这是因为 CSS 中的媒体查询条件同样是包含了边缘大小的。
因此，当我们想要设计一个在 768px 以下启用的样式时，应该使用 max-width:767px。
解决方案
从上面的分析可以看出，正确编写 SASS 媒体查询的关键是理解媒体查询条件的边缘大小。接下来，本文为大家提供具体的解决方案。
根据最小宽度匹配媒体查询
在媒体查询中使用 max-width 时，将查询参数换为一个「从零开始的数值」，然后将查询参数减 1。这样，就能正确地匹配到从「指定值A」开始的样式。
例如，如果你想匹配所有容器宽度大于 768px 的样式，应该写成以下代码：
@media only screen and (min-width: 769px) {
}这样就能正确地匹配到容器宽度等于 768px 及以上的样式。
根据最大宽度匹配媒体查询
在媒体查询中使用 min-width 时，将查询参数换为一个「加一后的数值」，然后将查询参数减 1。这样，就能正确地匹配到从「指定值A」以下的样式。
例如，如果你想匹配所有容器宽度小于 768px 的样式，应该写成以下代码：
@media only screen and (max-width: 767px) {
}这样就能正确地匹配到容器宽度小于 768px 的样式。
示例代码
为了更好地展示如何正确编写 SASS 媒体查询，本文在此提供一段基于 Bootstrap 的示例代码。
-- -------------------- ---- -------
--------------- ----- ---------
--------------- ----- ---------
--------------- ----- ---------
--------------- ----- ---------
--------------- ------ ---------
--------------- ------ ---------
------ ---- ------ --- ----------- ------------------ --- ----------- ------------------ -
---------- -
----------------- -----
-------- -----
-------------- -----
-
------------------ -
---------- -----
-
-
------ ---- ------ --- ----------- ------------------ -
---------- -
----------------- -------
-------- -----
-
------------------ -
---------- -----
-
-在上面的代码中，我们使用了 Bootstrap 的屏幕类别，对首页做出不同的样式设计。注意，我们使用了「正确的」媒体查询方法来匹配不同屏幕大小下的样式。
总结
本文深入分析了 SASS 媒体查询中最小宽度和最大宽度取值错误的问题，并提供了相应的解决方案。总的来说，正确理解媒体查询条件中的边缘大小是解决这个问题的关键。我们希望本文能够为您提供帮助，并推动 Web 前端技术的进一步发展。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64eae545f6b2d6eab35a11a8