如何在 LESS 中使用媒体查询
随着移动设备的不断普及，响应式设计逐渐成为了前端开发的主流趋势。而媒体查询则是实现响应式设计的重要手段之一。LESS 作为一门 CSS 预处理器，不仅可以简化 CSS 编写的过程，还可以让我们更加方便地使用媒体查询，提高前端开发效率。
LESS 媒体查询的基本语法
在 LESS 中，我们可以这样书写媒体查询：
@media (max-width: 768px) {
/* 在此处书写针对小屏幕设备的 CSS 样式 */
}与 CSS 相比，LESS 中的媒体查询表达式以括号括起来，并且可以使用 LESS 的内置变量和函数来书写。
对于阈值的书写，可以使用比较运算符（例如 >=、<=、>、<），也可以使用 LESS 内置的宽度变量，如下所示：
@media (max-width: @tablet) {
/* 在此处书写针对平板设备的 CSS 样式 */
}此外，媒体查询还支持逻辑运算符（例如 and、not、only）来限定查询的范围。
LESS 媒体查询的高级用法
除了基本语法外，LESS 中还提供了一些高级用法，可以让我们更加方便地书写媒体查询。
- 定义媒体查询变量
我们可以通过定义媒体查询变量，来减少冗余代码的书写。例如，在下面的代码中，我们定义了两个媒体查询变量，分别代表小屏幕和大屏幕：
@mobile: ~"only screen and (max-width: 767px)"; @desktop: ~"only screen and (min-width: 768px)";
然后在需要书写媒体查询的地方，直接使用这些变量就可以了：
-- -------------------- ---- -------
--------- -
------ -----
------ ------- -
---------- -----
-
------ -------- -
---------- -----
-
-- 嵌套媒体查询
在 LESS 中，我们可以嵌套多个媒体查询，来达到更加复杂的效果。例如：
-- -------------------- ---- -------
--------- -
------ -----
------ ----------- ------ -
---------- -----
------ ------------- ---------- -
------ -----
-
-
------ ----------- ------ -
---------- -----
------ ------------- --------- -
------ -----
-
-
-在上面的代码中，我们嵌套了两个媒体查询，在不同的设备和方向上展示不同的样式。
- 变量范围
与 CSS 不同，LESS 中的变量有其作用域的限制。当我们定义一个变量时，它只在当前范围内有效。因此，在媒体查询中使用变量时，需要注意变量的作用域。
例如，在下面的代码中，由于 @tablet 只在 @media (max-width: 767px) 以内的作用域有效，所以在另一个媒体查询中无法使用。
-- -------------------- ---- -------
------ ----------- ------ -
-------- ------
--------- -
---------- -----
------ ----------- -------- -
---------- -----
-
-
-
------ ----------- ------ -
-- ---- ------- -- --
-总结
LESS 中的媒体查询可以极大地提高前端开发效率，但使用时需要注意变量作用域的限制，并灵活运用嵌套媒体查询、变量范围等高级用法。在实际项目中，可以通过定义媒体查询变量、编写可重用的样式组件等方式来进一步简化书写。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64609467968c7c53b023f52d