之前的一个布局是用rem来做的
我上一段代码
1 div { 2 margin: 0.833333333rem 0; 3 } 4 /* 去处a标签的下划线*/ 5 a { 6 text-decoration: none; 7 } 8 9 .one { 10 30rem; 11 /*100/720*30*/ 12 height: 4.166666667rem; 13 /*图片宽750,高100*/ 14 background: url("./img/head.png"); 15 background-size: contain; 16 } 17 18 .two { 19 30rem; 20 /*400/720*30*/ 21 height: 16.6666667rem; 22 /*图片宽750,高400*/ 23 background: url("./img/top1.jpg"); 24 background-size: contain; 25 } 26 27 .three { 28 30rem; 29 height: 5.875rem; 30 /*图片宽750,高141*/ 31 background: url("./img/top2.jpg"); 32 background-size: contain; 33 } 34 35 .four { 36 28.33333333rem; 37 height: 13.16666667rem; 38 /*图片宽750,高316*/ 39 background: url("./img/top3.jpg") no-repeat; 40 background-size: contain; 41 margin-left: 0.833333333rem; 42 position: relative; 43 } 44 45 span { 46 position: absolute; 47 display: block; 48 8.33333333rem; 49 height: 2rem; 50 line-height: 2rem; 51 text-align: center; 52 background: #fff; 53 right: 0.833333333rem; 54 bottom: 0.833333333rem; 55 font-size: 0.95833333rem; 56 color: red; 57 cursor: pointer; 58 }
上面的样式里面的每个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文件了
1 @R1:24rem; 2 *{ 3 margin:0; 4 padding: 0; 5 } 6 .act{ 7 width: 720/@R1; 8 height: 100/@R1; 9 background: gray; 10 .act1{ 11 width: 144/@R1; 12 height: 100/@R1; 13 background: red; 14 float: left; 15 } 16 .act2{ 17 width: 216/@R1; 18 height: 100/@R1; 19 background: green; 20 float: left; 21 } 22 .act3{ 23 width: 360/@R1; 24 height: 100/@R1; 25 background: blue; 26 float: left; 27 } 28 }
当然了，如果出现跨域的问题，可能是需要开启php来执行