less
基本语法
- 变量、mixin、嵌套(注意&:hover、.@{var})、导入
less浏览器端的使用
1. 浏览器不识别less代码，必须先解析为css代码
2. 引入less文件需要加上type="text/less"
3. less.watch();无刷新预览新样式 有延迟
4. 以http形式打开网页（不支持file）
<link rel="stylesheet" type="text/less" href="less/test.less">
<script src="lib/less/less.min.js"></script>
<script>less.watch();</script>
rem
rem的认识
1. rem是相对单位
2. em的大小是基于父元素的字体大小
3. rem的大小是基于html元素的字体大小 r-root
4. 浏览器的默认字体大小是16px
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
html{
font-size: 20px;
}
body{
line-height: 1;
font-size: 50px;
font-family: SimSun;
}
.em{
font-size: 2em;
}
.rem{
font-size: 2rem;
}
</style>
</head>
<body>
<div class="em">AAA</div>
<div class="rem">AAA</div>
</body>
</html>
移动端适配方案——rem适配
移动端适配方案：
1. 伸缩布局 flex
2. 流式布局 百分比
3. 响应式布局 媒体查询（xs：流式布局）
共同点：元素只能做到width的适配(img除外)
rem适配：width和height都能做到适配（等比缩放）
4.rem布局
通过控制html上的字体大小去控制页面上所有以rem为单位的尺寸
4.1 设基准值
4.2 适配各种设备（媒体查询）
rem换算公式：当前基准值=预设基准值/设计稿宽度*当前设备宽度
4.3 把页面上的px——>rem
用less适配各类设备（改变html的字体大小，@media）
//设备屏幕种类
@DeviceList:750px,720px,640px,540px,480px,424px,414px,400px,384px,375px,360px,320px;
//屏幕种类数量
@len:length(@DeviceList);
//预设基准值
@baseFontSize:100px;
//设计稿尺寸
@psdWidth:750px;
//主题颜色
@suningColor:#fabc09;
1. less没有循环语法
2. 使用函数的迭代 死循环
3. 根据数组长度终止循环
4. 需要序号来判断 通过序号遍历 @index:1 开始
.adapterMixin(@index) when (@index>0){
@media (min-width: extract(@DeviceList,@index)){
html{
font-size: (@baseFontSize/@psdWidth) * extract(@DeviceList,@index) * 1px;
}
}
.adapterMixin(@index - 1);
}