如何利用 LESS 创建自适应布局
在移动互联网时代，移动设备已经成为了人们日常生活中不可或缺的一部分，而这也对前端布局提出了更高的要求。如何实现一个自适应布局也变得越来越重要。LESS作为一种CSS预处理语言，为我们提供了更加灵活的CSS样式表书写方式。下文将详细介绍如何利用LESS创建自适应布局。
1.设置基准字体大小
在LESS中，我们可以利用变量来定义基本样式。首先，我们需要在根元素上设置一个基准字体大小。
@base-font-size : 14px;
html {
font-size: @base-font-size;
}2.使用百分比设置宽度
如果我们想实现一个100%宽度的自适应布局，我们可以使用百分比来控制元素的宽度。
.wrapper {
width: 100%;
}3.使用 rem 单位设置宽度
rem是相对于根元素字体大小的单位，它的特点是随着字体大小的改变而改变。使用rem单位设置宽度可以使得布局更加灵活。
.container {
width: 30rem;
}4.利用媒体查询实现响应式布局
LESS为我们提供了 mixin 和 嵌套 的功能，可以让我们更加方便的书写媒体查询。通过在机型切换时，改变某些元素的属性，来实现不同屏幕下的页面布局。
-- -------------------- ---- -------
------ ------ --- ----------- ------ -
---------- -
------ -----
-
-
------ ------ --- ----------- ------ --- ----------- ------ -
---------- -
------ ----
-
-
------ ------ --- ----------- ------ --- ----------- ------- -
---------- -
------ ----
-
-
------ ------ --- ----------- ------- -
---------- -
------ ----
-
-5.利用 flexbox 实现自适应布局
flexbox是 CSS3 中的一个弹性盒模型，它可以自适应容器的大小，并且可以实现多项布局的复杂操作。
.flex-container {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: stretch;
}总结
利用LESS可以更加方便快捷地创建自适应布局，通过设置基准字体、使用百分比和rem单位、利用媒体查询等方式，我们可以在不同分辨率的屏幕上实现自适应布局。同时，flexbox也是一个非常好用的布局方案，可以根据具体的业务情况选择相应的方案实现自适应布局。
示例代码
-- -------------------- ---- -------
---------------- -----
---- -
---------- ----------------
-
-------- -
------ -----
-
---------- -
------ ------
-
------ ------ --- ----------- ------ -
---------- -
------ -----
-
-
------ ------ --- ----------- ------ --- ----------- ------ -
---------- -
------ ----
-
-
------ ------ --- ----------- ------ --- ----------- ------- -
---------- -
------ ----
-
-
------ ------ --- ----------- ------- -
---------- -
------ ----
-
-
--------------- -
-------- -----
---------- -----
---------------- -----------
------------ --------
-来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646d61e7968c7c53b0c123be