在Web设计中，使用媒体查询(Media Query)可以根据设备的尺寸和分辨率等属性来调整网页的布局和样式，以适应不同设备上的浏览效果。通过LESS语言编写CSS，可以更加方便、灵活地处理媒体查询的相关代码。本文介绍LESS中使用多重媒体查询的语法和实例，以及一些实用的技巧和指导意义。
基本媒体查询
在LESS中，可以使用@media关键字来定义媒体查询。例如，以下代码定义了一个针对宽度小于600像素的设备的媒体查询，并在其中定义了一个body元素的样式：
@media screen and (max-width: 600px) {
body {
font-size: 16px;
}
}这段代码可以编译成下面的CSS代码：
@media screen and (max-width: 600px) {
body {
font-size: 16px;
}
}在这个媒体查询中，screen表示当前设备是屏幕，(max-width: 600px)表示当前设备的宽度不超过600像素。如果媒体查询匹配成功，则其中的样式将生效。
多重媒体查询
在实际应用中，可能需要针对不同的设备属性来设置不同的样式。例如，可能需要在设备宽度大于600像素且小于900像素的情况下修改页面背景色，以及在横屏模式下修改外边距等。
在LESS中，可以使用多重媒体查询来定义这些不同的匹配条件。以下是一个示例代码：
-- -------------------- ---- -------
------ ------ --- ----------- ------ --- ----------- ------ -
---------- -
----------------- --------
-
-
------ ------ --- ------------- ---------- -
---------- -
------- - -----
-
-这段代码定义了两个媒体查询。第一个媒体查询匹配屏幕宽度在600像素至900像素之间的设备，并为.container元素设置了背景色。第二个媒体查询匹配设备处于横屏模式的情况，并为.container元素设置了外边距。
多重媒体查询的语法规则是将多个条件连接在一起，每个条件之间用空格分隔。条件的类型可以是宽度、高度、设备方向、像素密度等等。如果多个条件之间使用and连接，则所有条件都需要满足才能匹配成功，如上述示例中的第一个媒体查询。如果使用or连接，则只需要满足其中一个条件即可匹配成功，例如：
@media (max-width: 500px), (max-height: 500px) {
...
}这个媒体查询匹配设备宽度或高度不超过500像素的情况。
嵌套媒体查询
在实际应用中，可能需要为不同的元素定义不同的媒体查询样式。例如，需要在不同的设备尺寸下修改不同的标题字号。此时可以使用LESS的嵌套语法来定义嵌套媒体查询，例如：
-- -------------------- ---- -------
------- -
---------- -----
------ ------ --- ----------- ------ -
---------- -----
-
-- -
---------- -----
------ ------ --- ----------- ------ -
---------- -----
-
-
-在这个例子中，.header元素定义了默认的字号为20像素。它还包含两个嵌套的媒体查询，分别用于在宽度小于600像素的设备上修改.header及其子元素的字号。
在.header元素下面，又定义了一个嵌套的h1元素，并为其定义了默认字号为24像素。在这个元素下面，定义了另一个嵌套媒体查询，在宽度小于600像素的设备上，为h1元素设置字号为20像素。
通过嵌套语法的使用，可以让LESS代码更加简洁、易于维护。
总结
在本文中，我们介绍了LESS中使用多重媒体查询的语法和实例。多重媒体查询能够满足不同的设备属性的样式需求，而嵌套媒体查询可以使代码更加灵活和易于维护。在实际应用中，可以基于以上的示例来深入学习和应用多重媒体查询的相关技巧，以获得更好的用户体验和网页性能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647ece8448841e9894e7c49a