之前的一个布局是用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. Android入门之环境搭建

    欢迎访问我的新博客:http://www.milkcu.com/blog/ 原文地址:http://www.milkcu.com/blog/archives/1376935560.html 原创:An ...

  2. DOM（一）

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  3. android中自定义Theme以及TitleBar

    1.自定义Theme. 在res/values/styles.xml中的resources块中添加如下代码: <style name="StatusBarBackground" ...

  4. Easyui布局

    Easyui入门视频教程 第03集---Easyui布局 Easyui入门视频教程 第03集---Easyui布局 目录 -----------------------   Easyui入门视频教程 ...

  5. c#中如何跨线程调用windows窗体控件？

    我们在做winform应用的时候,大部分情况下都会碰到使用多线程控制界面上控件信息的问题.然而我们并不能用传统方法来做这个问题,下面我将详细的介绍.首先来看传统方法: public partial c ...

  6. 读写ini文件

    C# 使用文件流来读写ini文件 背景 之前采用ini文件作为程序的配置文件,觉得这种结构简单明了,配置起来也挺方便.然后操作方式是通过WindowsAPI,然后再网上找到一个基于WindowsAPI ...

  7. [转]Patching the Mach-o Format the Simple and Easy Way

    From:http://secureallthethings.blogspot.jp/2014/08/patching-mach-o-format-simple-and-easy.html I'm r ...

  8. C语言实现进制转换——超图面试题

    递归:递归的原理,就是自己调用自己本身.存在一个顺序的问题,如果在递归前的是顺序执行,递归后的是逆序执行,如下: void gogogo() { //递归之前 gogogo(); //递归之后 } 递 ...

  9. DevExpress 学习使用之 SplitContainerControl

    无论是 .net framework 自带还是第三方组件,使用 Split 类控件时通常其 Panel 中都会包含多个子控件,在运行时不可避免遇到因改变 splitter 位置或改变窗体大小引起的界面 ...

  10. jQuery幻灯片插件Skippr

    Skippr是一款带左右箭头,索引按钮,滑动切换效果并且轻量.快速的幻灯片 设置 引入jquery.skippr.css.jquery.js.jquery.skippr.js 注意jQuery必须在j ...