Html5浏览器端less应用

之前的一个布局是用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来执行