应用gulp工具构建个自动算rem布局的小例子

因为最近可能需要做移动端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:0;left:0; 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:0;left:0; width:100%; height:unit(70/@base,rem); background: @green;}

至于复杂高森的gulp用法还没研究，暂时就这么多了。

posted on 2016-09-21 16:18 小武爷阅读(648) 评论(0) 编辑收藏举报