`移动端布局``rem单位使用``flexible适配``gulp中的sass插件和bowsersync的使用

本篇主要介绍

移动端布局

、

rem单位使用

、

flexible适配

、

gulp中的sass插件和同步多屏浏览的bowsersync的使用

，并由此把百度前端学院的 “小薇的任务十一作为展示demo，demo的git连接，有需要完善的地方可以对我留言

本篇只对使用做说明，更多的一些使用和安装细节请自行

百度

一 、使用gulp

demo中包括使用gulp

或者参考gulp插件使用

这里是实现gulp压缩js和html的配置

gulp.task('miniJs', function () {
    gulp.src('dist/js/*.js')  //要合并的文件
        .pipe(concat('script.js'))  // 合并匹配到的js文件并命名为
        .pipe(minifyJs())  //使用uglify进行压缩,更多配置请参考：
        .pipe(gulp.dest('build/js'));
});

// html
gulp.task('miniHtml', function () {
    return gulp.src('dist/tempelete/*.html') // 要压缩的html文件
        .pipe(minifyHtml()) //压缩
        .pipe(gulp.dest('build/tep'))
        .pipe(reload({stream: true}));
});           

这是实现sass编译的gulp配置

gulp.task('sass', function() {
    return gulp.src('dist/css/*.scss')
        .pipe(sass())
        .pipe(autoprefixer({
            browsers: ['last 2 versions'], // 主流浏览器的最新两个版本
            cascade: false // 是否美化属性值
        }))
        .pipe(concat('style.css'))
        .pipe(gulp.dest("build/css"))
        .pipe(reload({stream: true}));
});           

bowsersync实现监听自动刷新的配置

gulp.task('serve', function() {
    browserSync.init({
        server: '../bingyue'
    });
    // gulp.watch("src/css/*.scss", ['sass']);
    //gulp.watch("dist/**").on('change', reload);
});
           

二、使用flexible和rem实现页面适配

使用flexible

只需要从把flexibledown下来，在页面的头部引入（body之前），这个是必须的

<script src="/dist/lib/lib-flexible/build/flexible.js"></script>           

！！！引用flexible就不要在设置缩放比了

算出根字体大小

由设计稿的宽度除以/10

$font-size-base: 75; //设计稿wdith/10
           

写个rem函数，可以动态帮你计算

@function rem($px){
  @return $px/$font-size-base+rem;
}           

使用rem单位的时间就可以这样用

height:rem(44)           

使用动态字体，一般来讲，字体是不推荐使用rem作为单位的，所以可以根据下面的来设置

@mixin fontDpr($font-size){
  font-size: $font-size * 1px;
  [data-dpr="1"] & {
    font-size: $font-size * .5px;
  }
  [data-dpr="2"] & {
    font-size: $font-size * 1px;
  }
  [data-dpr="3"] & {
    font-size: $font-size * 1.5px;
  }
}           

这样引用

@include fontDpr(15);//里面传一个基础的大小           

三、bowsersync的使用

demo的git连接down下来之后，直接在命令行输入gulp serve 即可启动bowsersync，预览项目的地址为http://localhost:3000/dist/templet/index.html

附带一个移动端的1px边框的sass函数

@mixin single-border ($borderColor,$borderWidth) {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  right: auto;
  top: auto;
  height: $borderWidth;
  width: 100%;
  background-color: $borderColor;
  display: block;
  z-index: 15;
  transform-origin: 50% 100%;
  transform: scaleY(.5);
}           

最后，本篇的所有的代码在移动端的demo的git连接有的。