因为最近可能需要做移动端rem布局，因为rem布局需要将px转化成rem，如果次都需要拿计算器算就太low了，所以就想到用less和gulp。
因为也是初学gulp，站点的文件结构还没想到太好，也只是demo下
用到gulp-less
gulp-watch
gulp-rev-append
首先是gulp代码
var gulp = require('gulp'),
less = require('gulp-less'),
rev = require('gulp-rev-append'),
watch = require('gulp-watch');
//liveReload = require('gulp-livereload');
//定义一个testless任务
gulp.task('testless',function(){
gulp.src('src/less/index.less')
.pipe(less())
.pipe(gulp.dest('dist/css'));
// .pipe(gulp.liveReload());
});
gulp.task('testRev',function(){
gulp.src('index.html')
.pipe(rev())
.pipe(gulp.dest('dist/'));
})
gulp.task('testWatch',function(){
gulp.watch('src/less/*.less',['testless']);//当less文件发生改变的时候，调用testless任务
})
html：动态设置像素比
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>html5</title>
<link rel="stylesheet" href="dist/css/index.css?rev=@@hash" type="text/css">
<script>
var iScale = 1;
iScale = iScale / window.devicePixelRatio;
console.log(iScale);
document.write('<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=' + iScale + ',minimum-scale=' + iScale + ',maximum-scale=' + iScale + '">');
var iWidth = document.documentElement.clientWidth;
iWidth=iWidth>1620?1620:iWidth;
document.getElementsByTagName('html')[0].style.fontSize = iWidth/16 + 'px';
</script>
</head>
<body>
<div class="doc">
<header></header>
<section class="box">
<div></div>
<div></div>
<div></div>
<div></div>
111<br />
111<br />
111<br />
css index.less unit()给计算结果添加rem单位 测试好用
@base:40;
@red : red;
@green:green; html{ overflow:hidden;}
body{ overflow: auto;}
.doc{}
header{position:fixed;top:;left:; width:100%; height:unit(70/@base,rem); background: @red;}
.box{
width:100%;
height:unit(2000/@base,rem);
padding-top:unit(70/@base,rem);
div{ width:50%; height:unit(190/@base,rem); background: @green; border: 1px solid @red; float: left; box-sizing: border-box; }
}
footer{position:fixed;bottom:;left:; width:100%; height:unit(70/@base,rem); background: @green;}
至于复杂高森的gulp用法还没研究，暂时就这么多了。