之前的一个布局是用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. 大数据和Hadoop生态圈

    大数据和Hadoop生态圈 一.前言: 非常感谢Hadoop专业解决方案群:313702010,兄弟们的大力支持,在此说一声辛苦了,经过两周的努力,已经有啦初步的成果,目前第1章 大数据和Hadoop ...

  2. APNs功能之Node.js和Mysql应用总结

    APNs功能之Node.js和Mysql应用总结 这篇文档主要是总结Node.js和Mysql的学习心得体会.当然也可以看作是此前所写的消息推送服务的续篇. 简单描述下应用背景,我们的应用需要实现苹果 ...

  3. vj1010:高精乘+细心模拟

    这题的话思路挺简单的,主要是打一个高精乘,然后考虑一些细节的东西 码得挺少时间的,但是调错调了很久... 讲一下思路吧: 就是读入的时候,先把小数点去掉,mark一下小数点的位置 去掉小数点之后也就进 ...

  4. Stimulsoft.Report.web viewer控件添加按钮

    当你购买了带源码的时候,你可以对源码进行修改以达到自己想要的效果,比较这里讲到的,向viewer控件工具栏添加按钮. 通过源码目录可以看出我们需要修改的有两部分代码 红色方块圈中的部分,[StiWeb ...

  5. jQuery的入门与简介

    jQuery的入门与简介<思维导图>   <初学者请各位高手指点指点> jQuery是继Prototype之后又一个优秀的JavaScript库,在JavaScript基础上我 ...

  6. 使用LFM（Latent factor model）隐语义模型进行Top-N推荐

    最近在拜读项亮博士的<推荐系统实践>,系统的学习一下推荐系统的相关知识.今天学习了其中的隐语义模型在Top-N推荐中的应用,在此做一个总结. 隐语义模型LFM和LSI,LDA,Topic ...

  7. [转]Mac OS X local privilege escalation (IOBluetoothFamily)

    Source: http://joystick.artificialstudios.org/2014/10/mac-os-x-local-privilege-escalation.html Nowad ...

  8. IIS日志分析的作用

    站长都知道有ISS日志,可是有很少人去关注它,也许你觉得在一些站长工具里面我们就能找到我们想要的工具,哪你就错了,我们的网站被收入靠的是蜘蛛,想要真正了解蜘蛛,就一定要好好重视iss日志分析,为什么这 ...

  9. opencv编程入门技巧

    opencv编程入门技巧 最近在项目中负责图像处理模块的编程工作,主要分为两个板块,一是视频图像去雾,二是可视.红外图像融合.为了提升开发效率,遂开始学习并使用opencv图像类库,效果很好的说~因为 ...

  10. 一步步教你读懂NET中IL（附带图）

    一步步教你读懂NET中IL(附带图) 接触NET也有1年左右的时间了,NET的内部实现对我产生了很大的吸引力,在msdn上找到一篇关于NET的IL代码的图解说明,写的挺不错的.个人觉得:能对这些底部的 ...