# LESS 的使用和 rem 布局的笔记

# 1.LESS 变量（css 中的颜色和数值经常使用）

1
2
3
4
5
6
7
8
9
10
11

@bkcolor:pink;
body{
    background-color: @bkcolor;
}
 
 
 
 
 
 
@BKcolor!=@bkcolor

# 2.LESS 不能被 html 页面直接编译，所以需要用到 easy less 插件

只要 less 保存就会生成新的 css 文件

# 3.Less 嵌套

嵌套写法 保存 生成 css 文件

伪类加 &

# 4.Less 运算

1. 最新的 less 涉及到除法需要加括号运算，运算符左右两侧空格隔开。

2. 只有一个单位，结果以最后一个单位为准。都有单位的以第一个单位为准。

3. 颜色也可以进行加减乘除（要加括号）

# rem 适配

让不能自适应的元素达到当设备尺寸发生改变时，等比例适配当前设备。

使用媒体查询，根据不同设备按比例设置 html 的字体的大小，用页面元素使用 rem 做尺寸单位，当 html 字体大小发生变化，元素尺寸也会发生变化。

1. less、媒体查询、rem
2. flexible.js、rem

这两种技术方案都可以完成适配

# 动态设计 font-size 大小

1. 把屏幕划分成 10、15、20 等分都可以，假设设计稿是 800px 分成 20 等分也就是 40px；

2. 把每一份的宽度就是 40px，那么在宽度为 400px 的设备上字体的大小为 400/20 就是 20px

3. 用元素大小除以不同尺寸下的 html 文字的大小，发现比例还是相同的。

例：800px 设计稿，8080 像素的页面元素在 800 的屏幕下就是 80/40 转换成 rem 就是 2rem2rem, 比例是 1:1, 到了 400 的屏幕下，字体大小为 20，2rem=40 宽高都是 40，但是比例还是 1：1，实现了在不同屏幕尺寸下等比例缩放的问题。

公式：页面的 rem 值 = 页面元素值 /（宽度划分的份数 / 屏幕宽度），屏幕宽度 / 划分的份数就是 htmlfont-size 的大小，或者：页面元素的 rem 值 = 页面元素值 /fontsize 的大小