`移动端布局`、`rem单位使用`、`flexible适配`、`gulp中的sass插件和同步多屏浏览的bowsersync的使用
来源:互联网 发布:淘宝店营销推广技巧 编辑:程序博客网 时间:2024/06/07 19:30
本篇主要介绍 移动端布局
、rem单位使用
、flexible适配
、gulp中的sass插件和同步多屏浏览的bowsersync的使用
,并由此把百度前端学院的 “小薇的任务十一作为展示demo,demo的git连接,有需要完善的地方可以对我留言
本篇只对使用做说明,更多的一些使用和安装细节请自行
百度
一 、使用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'));});// htmlgulp.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/build/tep/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连接有对的。
阅读全文
0 0
- `移动端布局`、`rem单位使用`、`flexible适配`、`gulp中的sass插件和同步多屏浏览的bowsersync的使用
- 使用Flexible实现手淘H5页面的终端适配rem自适应布局-移动端自适应必备
- 移动端开发rem单位的格式化js文件flexible.js
- 移动端的rem单位
- em和rem 单位的使用
- 移动端布局字体单位的选择之px、rem和em揭秘
- rem单位的使用总结
- 【移动端】使用REM进行的响应式布局
- 移动端rem单位自适应的用法
- 移动端的rem布局
- rem自适应布局-移动端自适应必备:flexible.js
- rem自适应布局-移动端自适应必备:flexible.js
- 微信小程序中单位rpx和rem的使用
- 移动端布局单位选择之rem
- canvas无法使用rem单位的解决方案
- 前端rem单位的正确使用姿势
- 使用gulp-sass 和 gulp-livereload 自动编译sass文件
- 移动端自适应:flexible.js可伸缩布局使用
- java中equals(),==与hashcode()的区别?
- Netty4启动ServerBootStrap源码分析
- 类字面常量.class
- 一个整数二进制位中1的个数
- java并发编程实战-性能与可伸缩性2
- `移动端布局`、`rem单位使用`、`flexible适配`、`gulp中的sass插件和同步多屏浏览的bowsersync的使用
- 【剑指offer】面试题 26:树的子结构
- JS基础篇之基本概念
- visio对自己画的图进行填充
- Spring 依赖注入方式详解
- Request和Session的区别
- 2017.07.21
- Spring-(2)Spring IOC
- VC获取网页源码的三种方式