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 在客户端保存文件 ...
随机推荐
- Nginx+phpfastcgi下flush输出问题
最近由于业务需要,需要使用php的flush输出缓存刷新,处理浏览器超时问题. 最初的测试代码如下: ob_start();//打开缓冲区 for ($i=10; $i>0; $i--) { e ...
- codeigniter（ci）在nginx下返回404的处理方法即codeigniter在nginx下配置方法
codeigniter(ci)在nginx下返回404的处理方法即codeigniter在nginx下配置方法 进入nginx的配置文件 加上一句(本来就有这句,只需要修改一下就行了) locatio ...
- ios开发实践之UIDatePicker（已对之前无法解决的问题做了解答）
需求:要做一个生日选择的控件,但除了选择之外还需要自定义几个控件,跟生日选择控件组合一起. 做法:自定义了一个UIImageView,并且作为背景.在这个背景view上再添加其他button和时间选择 ...
- Oracle中复制表结构和表数据
一.复制表结构及其数据 create table new_table as (select * from old_table); 二.只复制表结构 create table new_table as ...
- K2 BPM项目 基于COM组件调用SAP RFC 问题
K2 BPM项目 基于COM组件调用SAP RFC 问题 问题前景: 环境:Win 2008 R2 64bit 最近项目中有支流程需求中需要在会计入账环节回写SAP的会计凭证. SAP组给我们提供.N ...
- COFF/PE文件结构
COFF/PE文件结构 原创 C++应用程序在Windows下的编译.链接(二)COFF/PE文件结构 2.1概述 在windows操作系统下,可执行文件的存储格式是PE格式:在Linux操作系统下, ...
- How to deploy openbr on linux server very shorly---- linuxmint13/ubuntu12.04 AMD64/debian7
SO FAST ON A SERVER!!!! There are serveral packages that you have to install: 1. openbr 0.6.0 packag ...
- SVN-钩子祥解与配置
钩子脚本的具体写法就是操作系统中shell脚本程序的写法,请根据自己SVN所在的操作系统和shell程序进行相应的写作 所谓钩子就是与一些版本库事件触发的程序,例如新修订版本的创建,或是未版本化属性的 ...
- JSP实现页面跳转的方式
js实现页面跳转的几种方式普通方式 第一种: <script language="javascript" type="text/javascript"&g ...
- Java7新特性
① 新增了switch对字符串的支持,也就是说可以在switch之后直接使用字符串来进行判断,语法基本与Java7之前支持的语法一样. ② 对数值字面量的增强支持,首先是可以在源代码中直接使用二进制数 ...