在当今不断发展的移动互联网时代，越来越多的用户倾向于使用移动设备来浏览网页，这就使得前端开发人员面临着如何在不同设备上实现良好的用户体验的问题。而 LESS 提供的媒体查询功能就为此提供了很好的解决方案。
什么是媒体查询？
媒体查询是 CSS3 新增的一个功能。通过使用 @media 关键字，在 CSS 文件中嵌套 CSS 样式规则，可以在不同的设备或用户代理（浏览器）上应用不同的 CSS 样式。
LESS 中的媒体查询
LESS 是一种 CSS 预处理器，它通过引入变量、混合、函数等高级功能，扩展了 CSS 的能力，使得编写 CSS 更加便捷。而 LESS 中也可以使用媒体查询来实现不同设备的适配。
媒体查询语法
LESS 中的媒体查询语法和 CSS 中的媒体查询语法相同，可以使用以下语法：
@media only screen and (max-width: 768px) {
/* CSS 样式规则 */
}其中，only screen 定义了媒体类型为屏幕，max-width: 768px 定义了屏幕宽度最大为 768px 时应用的样式。
实现不同设备的适配
在实际开发中，可以根据不同的设备对页面进行适配。例如，在手机设备上，可以将页面元素大小调整为更适合移动设备观看的尺寸。而在 PC 设备上，则可以显示更多的内容。
通过媒体查询，可以实现以下效果：
-- -------------------- ---- -------
-- ---- --
---- -
---------- -----
------ -----
-
-- ------ --
------ ---- ------ --- ----------- ------ -
---- -
---------- -----
-
-
-- ------ --
------ ---- ------ --- ----------- ------ --- ----------- ------- -
---- -
---------- -----
-
-
-- -- ---- --
------ ---- ------ --- ----------- ------- -
---- -
---------- -----
-
-
在上述例子中，通过设置不同的媒体查询条件，实现了根据不同设备显示不同的元素大小。
总结
通过 LESS 中的媒体查询功能，我们可以轻松地实现针对不同设备的页面适配。在实际开发中，可以根据具体需求灵活运用媒体查询，为用户提供更加舒适的浏览体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64744db7968c7c53b01af7ab