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

Html5浏览器端less应用的更多相关文章

  1. html5 浏览器端数据库

    为什么使用浏览器端数据库:随着浏览器的处理能力不断增强,越来越多的网站开始考虑,将大量数据储存在客户端,这样可以减少用户等待从服务器获取数据的时间. 一.localStorage  — 本地存储  可 ...

  2. HTML5浏览器端图片预览&生成Base64

    本文主要介绍如何通过拖拽方式在浏览器端实现图片预览,并生成图片的Base64编码. 工具链接:图片转Base64. 首先介绍一下FileReader, FileReader对象允许浏览器使用File或 ...

  3. FingerprintJS - 在浏览器端实现指纹识别

    FingerprintJS 是一个快速的浏览器指纹库,纯 JavaScript 实现,没有依赖关系.默认情况下,使用 Murmur Hash 算法返回一个32位整数.Hash 函数可以很容易地更换. ...

  4. Web Storage：浏览器端数据储存机制

    目录 概述 操作方法 存入/读取数据 清除数据 遍历操作 storage事件 参考链接 概述 这个API的作用是,使得网页可以在浏览器端储存数据.它分成两类:sessionStorage和localS ...

  5. html5移动端页面分辨率设置及相应字体大小设置的靠谱使用方式

    对于html5移动端网页编写CSS网上有很多介绍的文章,但在实际使用过程中还是会纠结. 网上的资料太多,且大多都是技术介绍型,特别是针对android上,网上写的各种麻烦,各种复杂,各种不接地气儿.. ...

  6. 周记5——随机撒花特效、动态修改伪元素样式、contenteditable属性、手机端调试利器VConsole、浏览器端debug调试

    记录一些小零碎知识点,以便日后查看~ 1.随机撒花特效 教师节快到了,公司的产品提出一个需求:在IM(即时聊天)聊天界面弹出教师节的祝福“广告”,用户点击“发送祝福”按钮,聊天界面会随机撒花.这里的重 ...

  7. 浏览器端用JS实现创建和下载图片

    问题场景 在前端很多的项目中,文件下载的需求很常见.尤其是通过JS生成文件内容,然后通过浏览器端执行下载的操作.如图片,Execl 等的导出功能.日前,项目中就遇到了这类需求,在浏览器端实现保存当前网 ...

  8. 在浏览器端用JS创建和下载文件

    前端很多项目中,都有文件下载的需求,特别是JS生成文件内容,然后让浏览器执行下载操作(例如在线图片编辑.在线代码编辑.iPresst等). 但受限于浏览器,很多情况下我们都只能给出个链接,让用户点击打 ...

  9. 浏览器端JS导出EXCEL

    浏览器端JS导出EXCEL FileSaver.js 实现了在本身不支持 HTML5 W3C saveAs() FileSaver 接口的浏览器支持文件保存.FileSaver.js 在客户端保存文件 ...

随机推荐

  1. CODEFORCES #272 DIV2[为填完]

    #272是自己打的第一场cf,感觉这一套质量挺棒的,不像后两场略水 //先附上A,B,C的题解,因为离noip只剩下一点时间了,所以之后不一定还刷cf,暂且就先放上前三题好了 A题目大意忘了.懒得看, ...

  2. vs2013

    vs2013使用初体验   刚安装好vs2013 , 初步体验了一把, 下面是我目前感受到的改变(对比vs2012) 1. 任务栏图标变了 (左边vs2013, 右边vs2012)    2. 开始界 ...

  3. Vi编辑器入门

    Vi编辑器入门   vi编辑器是所有Unix及Linux系统下标准的编辑器,类似于windows上的记事本! 1.vi的基本概念  基本上vi可以分为三种状态,分别是命令模式(command mode ...

  4. T-SQL的10个好习惯

    有关T-SQL的10个好习惯 1.在生产环境中不要出现Select * 这一点我想大家已经是比较熟知了,这样的错误相信会犯的人不会太多.但我这里还是要说一下. 不使用Select *的原因主要不是坊间 ...

  5. 北京南天软件java工程师面试题

    此试题为北京南天软件java工程师面试题(部分) 一.单项选择 (1)下列关于构造方法的叙述中,错误的是(C) A.java语言规定构造方法名与类名必须相同 B.java语言规定构造方法没有返回值,但 ...

  6. iOS 开发之Target-action模式

    Target-action:目标-动作模式,它贯穿于iOS开发始终.但是对于初学者来说,还是被这种模式搞得一头雾水. 其实Target-action模式很简单,就是当某个事件发生时,调用那个对象中的那 ...

  7. IP：网际协议

    IP:网际协议 1.概述      IP是TCP/IP协议族中最为核心的协议.所有的TCP,UDP,ICMP,IGMP数据都以IP数据报格式传输.      IP提供不可靠,无连接的数据报传送服务. ...

  8. 工作流--JBPM简介及开发环境搭建

    一. 工作流简介 项目中不断的接触工作流,点点滴滴积累了一些,下面把一些学习到的东西整理记录下来. 工作流一般的适用场景:公文流转.行政审批.订单处理.产品研发.制造过程等.用专业一点的语言来描述工作 ...

  9. 如何优雅的设计Redux中的Store

    用了几个月的redux,现在回过来总结一下. 刚开始用的时候遇到一个比较大的疑问,就是如何设计redux的store中的state树,这应该是我在使用redux中最大的一个疑问,阻挡了我前进的脚步,当 ...

  10. linux内核内存管理(zone_dma zone_normal zone_highmem)

    Linux 操作系统和驱动程序运行在内核空间,应用程序运行在用户空间,两者不能简单地使用指针传递数据,因为Linux使用的虚拟内存机制,用户空间的数据可能被换出,当内核空间使用用户空间指针时,对应的数 ...