在现代化的 web 开发中，移动端适配问题是必不可少的。而在已经成熟的 CSS 预处理语言中，LESS 作为其中之一，可以大大提升我们的前端开发效率，并且 LESS 也可以帮助我们实现 100% 的自适应布局。在本文中，我们将介绍一些 LESS 实现自适应布局的技巧，希望对于开发者有所帮助。
1. 使用 @media 查询
LESS 的嵌套语法非常棒，我们可以在一个样式块中嵌套另一个样式块，这也可以用在实现响应式布局的时候。在 LESS 中，我们可以使用 @media 查询来实现基于视口宽度的自适应布局，其中通过 @screen-sm、@screen-md 和 @screen-lg 等变量来定义不同屏幕宽度。下面是一个例子：
-- -------------------- ---- -------
-- ----
----------- ------
----------- ------
----------- ------
-- --
--------- -
---------- -----
------ ------ --- ----------- ----------- -
---------- -----
-
------ ------ --- ----------- ----------- -
---------- -----
-
------ ------ --- ----------- ----------- -
---------- -----
-
-这样的话，在不同的屏幕宽度下，.selector 的字号大小会自动适应。
2. 使用百分比布局
在一个相对复杂的响应式布局中，将所有的尺寸都改成百分比可以大大方便我们的布局设计。相较于 px 值，百分比可以跟随父级元素而自动适应。下面是一个示例：
-- -------------------- ---- -------
-- ----
--------------------- -------
-- --
---------- -
------ -----
---------- ---------------------
------- - -----
-
---- -
------ -----
------ ------ --- ----------- ----------- -
------ ----
-
------ ------ --- ----------- ----------- -
------ --------------
-
------ ------ --- ----------- ----------- -
------ ----
-
-在这个示例中，.container 的最大宽度为 1200px，.box 的宽度会在不同的屏幕宽度下自适应变化。
3. 使用 calc() 函数
calc() 函数可以帮助我们做一些简单的数学运算，其中可以呢执行加减乘除等基本运算。例如，我们可以使用 calc() 函数来设置元素的宽度，在此基础上使用百分比实现自适应布局。下面是一个示例：
-- -------------------- ---- -------
-- ----
--------------------- -------
-- --
---------- -
------ -----
---------- ---------------------
------- - -----
-
---- -
------ -----
------ ------ --- ----------- ----------- -
------ ---------- - -- - ------
-
------ ------ --- ----------- ----------- -
------ ---------- - -- - ------
-
------ ------ --- ----------- ----------- -
------ ---------- - -- - ------
-
-在这个示例中，.box 每一列的宽度是 calc((100% / n) - 10px)，其中 n 代表每行的元素个数。
总结
在开发响应式布局的时候，LESS 可以大大提升我们的开发效率和代码可读性。上面我们介绍了三个 LESS 实现自适应布局的技巧，它们是：
- 使用 @media 查询
- 使用百分比布局
- 使用 calc() 函数
我们可以根据具体的项目需要选择不同的实现方式，以实现最佳的自适应效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647025db968c7c53b0e48fd1