LESS的使用和rem布局的笔记

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

@变量名：值

不能包含特殊字符，不能以数字开头，大小写区分

@bkcolor:pink;
body{
    background-color: @bkcolor;
}






@BKcolor!=@bkcolor

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

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

3.Less嵌套 

 嵌套写法 保存  生成  css文件

伪类加&

 4.Less运算

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

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

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

 rem适配

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

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

1.less、媒体查询、rem

2.flexible.js、rem

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

动态设计font-size大小

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

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

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

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

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