less的语法
- 注释
- // 只在less中显示
- /**/ 会在编译好的css文件中显示
- 变量
- 定义变量用@
- less中的写法
@ly_width:100px; .box { width:@ly_width; }
- 编译后在css中显示的是
.box { width:100px; }
- 定义变量用@
- 混合
- 不带参数的混合
- 先上less中的代码 如果想在.one中应用.border的样式怎么办?
@ly_width:100px; @ly_height:200px; @ly_color:green; .border { border:1px solid red; } .one { width:@ly_width; height:@ly_height; background-color:@ly_color; }
- 写成下面的样子
@ly_width:100px; @ly_height:200px; @ly_color:green; .border { border:1px solid red; } .one { width:@ly_width; height:@ly_height; background-color:@ly_color; .border; }
- 编译后在css中显示的是
.border { border:1px solid red; } .one { width: 100px; height: 200px; background-color: #008000; border: 1px solid red; }
- 带参数的混合---不带默认值 (可以传多个参数,以逗号或者分号隔开,推荐用分号 下面以一个参数为例)
- less中的写法
@ly_width:100px; @ly_height:200px; @ly_color:green; .border(@border_width) { border:@border_width solid red; } .one { width:@ly_width; height:@ly_height; background-color:@ly_color; .border(1px); }
- 编译后在css中显示的是
.one { width: 100px; height: 200px; background-color: #008000; border: 1px solid #ff0000; }
- 带参数的混合---带默认值 (可以传多个参数 下面以一个参数为例)
- less中的写法
@ly_width:100px; @ly_height:200px; @ly_color:green; .border(@border_width:3px;) { border:@border_width solid red; } .one { width:@ly_width; height:@ly_height; background-color:@ly_color; .border(); }
- 编译后在css中显示的是
.one { width: 100px; height: 200px; background-color: #008000; border: 3px solid #ff0000; }
- 在解决css3兼容性时候经常用到
- 解决border-radius兼容
.border_radius (@radius: 5px) { -webkit-border-radius: @radius; -moz-border-radius: @radius; -ms-border-radius: @radius; -o-border-radius: @radius; border-radius: @radius; }
- 不带参数的混合
- 匹配模式
- 可以理解成if 和上面的混合有些相似
- less中的写法
//定义上,下,左,右边框的样式 .border(top;@border_width:5px;@border_color:red){ border-top:@border_width solid @border_color; } .border(bottom;@border_width:5px;@border_color:red){ border-bottom:@border_width solid @border_color; } .border(left;@border_width:5px;@border_color:red){ border-left:@border_width solid @border_color; } .border(right;@border_width:5px;@border_color:red){ border-right:@border_width solid @border_color; } //如果想写通用的样式 可以在下面的代码中写 格式是固定的 .border(@_,@border_width:5px;@border_color:red){ border-color:yellow; } .border_use1 { //选择和if差不多 如果是left就调用上面对应的 .border(left); } .border_use2 { //选择和if差不多 如果是right就调用上面对应的 .border(right); }
- 编译后在css中显示的是
.border_use1 { border-left:5px solid #ff0000; border-color:yellow; } .border_use2 { border-right:5px solid #ff0000; border-color:yellow; }
- 可以理解成if 和上面的混合有些相似
- 运算
- 运算提供了加,减,乘,除操作,还可以做属性值和颜色的运算...
- less中的写法
@ly_width:100px; .one { width:@ly_widht + 100; }
- 编译后在css中显示的是
.one { width:200px; }
- 运算提供了加,减,乘,除操作,还可以做属性值和颜色的运算...
- 嵌套
- 可以在一个选择器中嵌套另一个选择器,代码看起来层次分明,提高代码可维护性
- html结构
<div class="one"> <div class="two"></div> </div>
- less中的写法
@ly_width:100px; @ly_height:200px; @ly_color:red; .one { width:@ly_width; height:@ly_height; background-color:@ly_color; .two { background-color: green; } }
- 编译后在css中显示的是
.one { width: 100px; height: 200px; background-color: #ff0000; } .one .two { background-color: green; }
- 可以在一个选择器中嵌套另一个选择器,代码看起来层次分明,提高代码可维护性
- @arguments变量
- 可以包含所有的变量,将变量一起处理
- less中的写法
//和前面提到的混合一起举个栗子 .border(@border_width;@border_style;@border_color){ border:@arguments; } .one { .border(1px;solid;red); }
- 编译后在css中显示的是
.one { border:1px solid #ff0000; }
- 可以包含所有的变量,将变量一起处理
text.less代码引入到html中
@charset"utf-8";
@color:red;
@fontSize:16px;
@className:box;
/*注释:在css中可以访问*/
//注释:在css中不支持,不会编译在css文件中
//变量以@前缀
//js命名与js一样
a {
color: @color;
font-size:@fontSize ;
}
//变量名拼接,使用方法:@(变量)
.@{className} {
color: @color;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/less" href="test.less">
<!--//与css一样引用,但需要注意一定要加type="text/less",不然样式
不会被识别-->
<script src="lib/less/less.js"></script> <!--//通过less里
面的ajax向服务器请求数据,将less转换为css-->
<script>less.watch();</script> <!--//不用刷新直接出来样式-->
</head>
<body>
<a href="javascript:;">天下第一刀,蛮三刀天下第一刀,蛮三刀
天下第一刀,蛮三刀天下第一刀,蛮三刀天下第一刀,蛮三刀
天下第一刀,蛮三刀天下第一刀,蛮三刀天下第一刀,蛮三刀天下
第一刀,蛮三刀天下第一刀,蛮三刀天下第一刀,蛮三刀天下第一刀,
蛮三刀天下第一刀,蛮三刀天下第一刀,蛮三刀天下第一刀,蛮三刀
天下第一刀,蛮三刀天下第一刀,蛮三刀天下第一刀,蛮三刀天下第
一刀,蛮三刀天下第一刀,蛮三刀天下第一刀,蛮三刀
</a>
</body>
</html>
rem布局
流式布局
响应式布局 媒体查询
伸缩布局 flex
共同点:只能做宽度的适配(排除图片,因为图片有宽高自适应)都不能对height进行百分比布局(等比缩放),只能给固定高度
rem布局----通过控制html上的文字大小去控制页面上所有以rem为单位的基准值控制尺寸
吧页面上所有px单位换为rem单位
怎么换算?-------预设一个基准值 方便计算 100px = 1rem
换算公式:当前的rem基准值= 预设基准值/设计稿的宽*当前屏幕的宽
怎么去改变js换算 , 媒体查询
设备 320px 414px 640px
当前设备对应的基准值=预设/预设对应的屏幕尺寸*当前屏幕尺寸
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
padding: 0;
margin: 0;
}
@media(min-width: 320px) {
html{
font-size: 50px;
}
}
@media(min-width: 414px) {
html{
font-size: 64px;
}
}
@media(min-width: 640px) {
html{
font-size: 100px;
}
}
.rem{
width: 100%;
background-color: #e20c3a;
height: 1rem;
line-height: 1rem;
font-size: 0.32rem;
text-align: center;
}
</style>
</head>
<body>
<div class="rem">rem</div>
</body>
</html>