之前的一个布局是用rem来做的
我上一段代码
div {
margin: 0.833333333rem 0;
}
/* 去处a标签的下划线*/
a {
text-decoration: none;
}
.one {
width: 30rem;
/*100/720*30*/
height: 4.166666667rem;
/*图片宽750,高100*/
background: url("./img/head.png");
background-size: contain;
}
.two {
width: 30rem;
/*400/720*30*/
height: 16.6666667rem;
/*图片宽750,高400*/
background: url("./img/top1.jpg");
background-size: contain;
}
.three {
width: 30rem;
height: 5.875rem;
/*图片宽750,高141*/
background: url("./img/top2.jpg");
background-size: contain;
}
.four {
width: 28.33333333rem;
height: 13.16666667rem;
/*图片宽750,高316*/
background: url("./img/top3.jpg") no-repeat;
background-size: contain;
margin-left: 0.833333333rem;
position: relative;
}
span {
position: absolute;
display: block;
width: 8.33333333rem;
height: 2rem;
line-height: 2rem;
text-align: center;
background: #fff;
right: 0.833333333rem;
bottom: 0.833333333rem;
font-size: 0.95833333rem;
color: red;
cursor: pointer;
}上面的样式里面的每个rem都是要用计算器算出来的,一个页面有多少个div,要做多少个页面?那不是要疯了
所以可以用less来做这个复杂的事情
Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。
Less 可以运行在 Node 或浏览器端。
下面我举一个在浏览器端运行的例子
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1 user-scalable=0">
<title>Document</title>
<script>
// 获取屏幕宽度
var iWidth = window.screen.width / 30;
// 设置一个rem的值等于iWidth
document.getElementsByTagName("html")[0].style.fontSize = iWidth + "px";
</script>
<!--调用外部less文件-->
<link rel="stylesheet/less" type="text/css" href="./css/act.less" />
<!--调用外部js文件来进行转译less变为css-->
<script src="./lib/less/less.js/less.min.js" type="text/javascript"></script>
</head> <body>
<div class="act">
<div class="act1"></div>
<div class="act2"></div>
<div class="act3"></div>
</div>
</body> </html>
这里四个div的样式我是写在less里面的
@R1看成一个自定义变量,为什么是24rem, 因为我的图是720*1334的,所以,不论是是高还是宽都是 x/720*30
x/720*30 可以看成x/(720/30)，那么这里看出来了720/30=24，这里我们设置一个24rem
所以当我们要知道宽高的rem值，就可以用实际图片的宽高/24rem，也就是/@R1
这样是不是省事了很多
然后通过调用
<link rel="stylesheet/less" type="text/css" href="./css/act.less" />
<script src="./lib/less/less.js/less.min.js" type="text/javascript"></script> 就可以让浏览器识别less文件了
@R1:24rem;
*{
margin:;
padding:;
}
.act{
width: 720/@R1;
height: 100/@R1;
background: gray;
.act1{
width: 144/@R1;
height: 100/@R1;
background: red;
float: left;
}
.act2{
width: 216/@R1;
height: 100/@R1;
background: green;
float: left;
}
.act3{
width: 360/@R1;
height: 100/@R1;
background: blue;
float: left;
}
}
当然了，如果出现跨域的问题，可能是需要开启php来执行