Html5浏览器端less应用
之前的一个布局是用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应用的更多相关文章
- html5 浏览器端数据库
为什么使用浏览器端数据库:随着浏览器的处理能力不断增强,越来越多的网站开始考虑,将大量数据储存在客户端,这样可以减少用户等待从服务器获取数据的时间. 一.localStorage — 本地存储 可 ...
- HTML5浏览器端图片预览&生成Base64
本文主要介绍如何通过拖拽方式在浏览器端实现图片预览,并生成图片的Base64编码. 工具链接:图片转Base64. 首先介绍一下FileReader, FileReader对象允许浏览器使用File或 ...
- FingerprintJS - 在浏览器端实现指纹识别
FingerprintJS 是一个快速的浏览器指纹库,纯 JavaScript 实现,没有依赖关系.默认情况下,使用 Murmur Hash 算法返回一个32位整数.Hash 函数可以很容易地更换. ...
- Web Storage：浏览器端数据储存机制
目录 概述 操作方法 存入/读取数据 清除数据 遍历操作 storage事件 参考链接 概述 这个API的作用是,使得网页可以在浏览器端储存数据.它分成两类:sessionStorage和localS ...
- html5移动端页面分辨率设置及相应字体大小设置的靠谱使用方式
对于html5移动端网页编写CSS网上有很多介绍的文章,但在实际使用过程中还是会纠结. 网上的资料太多,且大多都是技术介绍型,特别是针对android上,网上写的各种麻烦,各种复杂,各种不接地气儿.. ...
- 周记5——随机撒花特效、动态修改伪元素样式、contenteditable属性、手机端调试利器VConsole、浏览器端debug调试
记录一些小零碎知识点,以便日后查看~ 1.随机撒花特效 教师节快到了,公司的产品提出一个需求:在IM(即时聊天)聊天界面弹出教师节的祝福“广告”,用户点击“发送祝福”按钮,聊天界面会随机撒花.这里的重 ...
- 浏览器端用JS实现创建和下载图片
问题场景 在前端很多的项目中,文件下载的需求很常见.尤其是通过JS生成文件内容,然后通过浏览器端执行下载的操作.如图片,Execl 等的导出功能.日前,项目中就遇到了这类需求,在浏览器端实现保存当前网 ...
- 在浏览器端用JS创建和下载文件
前端很多项目中,都有文件下载的需求,特别是JS生成文件内容,然后让浏览器执行下载操作(例如在线图片编辑.在线代码编辑.iPresst等). 但受限于浏览器,很多情况下我们都只能给出个链接,让用户点击打 ...
- 浏览器端JS导出EXCEL
浏览器端JS导出EXCEL FileSaver.js 实现了在本身不支持 HTML5 W3C saveAs() FileSaver 接口的浏览器支持文件保存.FileSaver.js 在客户端保存文件 ...
随机推荐
- 把《C语言接口与实现》读薄之第一章：引言
1.1文学程序 文学程序(literate program):接口及其实现的代码与对其进行解释的正文交织在一起.文学程序由英文正文和带标签的程序代码块组成.例如, 〈compute x * y〉≡ s ...
- C语言可变参数函数的编写
1. 引言 C语言我们接触的第一个库函数是 printf(“hello,world!”);其参数个数为1个. 然后,我们会接触到诸如: printf(“a=%d,b=%s,c=%c”,a,b,c);此 ...
- PHP中的赋值-引用or传值？
直接上代码: <?php $num1 = 1; $num2 = $num1; $num1 = 2; echo $num2 . "\n"; $arr1 = array(1, 2 ...
- CSS居中方法搜集
转自这里:http://jinlong.github.io/blog/2013/08/13/centering-all-the-directions/ 兼容低版本IE的方法 html使用表格结构 背景 ...
- WampServer Mysql配置
WAMP:Windows下的Apache+Mysql+Perl/PHP/Python,一组常用来搭建动态网站或者服务器的开源软件.可点击此处下载WampServer,然后,按照提示安装WAMP.需要说 ...
- iMac 无线键盘 无法配对
正好小编手里也有一个 Apple wireless keyboard 键盘,经测试发现确实有他所说的问题.在互联网上找了一圈儿都没找到解决方案,苹果官方也没有给出相关方案.只好自己琢磨,还好终于研究出 ...
- 10169 - Urn-ball Probabilities !
描述:有两个罐子,一个罐子里有一个红球,另一个罐子里有一个红球和一个白球,每次从两个罐子里各取一个球,然后在向每个罐子里各加一个白球,一次取到两个红球时就结束取球,求n次取球中至少一次为取球为红球的概 ...
- sqlserver生成随机数 2011-12-21 15:47 QQ空间
-创建视图 create view myview as select re=rand() --自定义函数:取得指定范围的随机数 create function mydata( @a int, @b i ...
- linux内核skb操作
1,struct sk_buff数据结构 struct sk_buff{ //这两个结构必须放在最前面 struct sk_buff *next; struct sk_buff *prev; stru ...
- 从零开始学C++之RTTI、dynamic_cast、typeid、类与类之间的关系uml
一.RTTI Run-time type information (RTTI) is a mechanism that allows the type of an object to be deter ...