2018移动端页面适配-自适应最新方案直接写px--------通过gulp工作流搭建一体化的移动端开发环境

1.开始

在flexible的GitHub上面写着

由于
viewport
单位得到众多浏览器的兼容，
lib-flexible
这个过渡方案已经可以放弃使用，不管是现在的版本还是以前的版本，都存有一定的问题。建议大家开始使用
viewport
来替代此方案。
vw
的兼容方案可以参阅《如何在Vue项目中使用vw实现移动端适配》一文。

vm是什么? ---

vw：是Viewport's width的简写,1vw等于window.innerWidth的1%

UI给的设计稿，一般都是宽为750px的,那么就是

100vw = 750px | 即1vw = 7.5px

2.代码

var gulp = require('gulp');
var jshint = require('gulp-jshint'); // 引入检测js文件模块
var uglify = require('gulp-uglify'); // 引入js压缩模块
var concat = require('gulp-concat'); // 引入合并文件模块
var minhtml = require('gulp-minify-html'); // 引入html压缩模块
var minify = require('gulp-minify-css'); // 引入压缩css的模块
var imagemin = require('gulp-imagemin'); // 引入压缩图片插件
var postcss = require('gulp-postcss'); //JavaScript 代码来转换CSS 中的样式
var autoprefixer = require('autoprefixer'); //自动加上浏览器前缀
var postcsswritesvg = require('postcss-write-svg') // 解决1px方案// UI设计稿750px宽，那么100vw = 750px，即1vw = 7.5px
var pxtoviewport = require('postcss-px-to-viewport'); // 代码中写px编译后转化成vmvar browserSync = require('browser-sync')
var opn = require('opn')
//静态服务器// 1.处理js文件
gulp.task('js', function () {return gulp.src('js/*.js').pipe(jshint()) //检测js.pipe(uglify()) //压缩js.pipe(concat('index.js')) //合并js文件并命名为'index.js'.pipe(gulp.dest('build/js')); //将合并后的js文件输出到build文件夹下
});// 2.处理css
gulp.task('css', function () {var processors = [pxtoviewport({viewportWidth: 750,viewportHeight: 1334,unitPrecision: 5,viewportUnit: 'vw',selectorBlackList: [],minPixelValue: 1,mediaQuery: false})];return gulp.src('css/*.css') // 指定css文件夹下的所有后缀为.css的文件.pipe(postcss([ autoprefixer() ]))  //自动加上浏览器前缀.pipe(postcss(processors))//.pipe(minify()) //使用minify模块进行css 压缩.pipe(gulp.dest('build/css')) // 最终将压缩的文件输出到minicss文件下
})// 3.压缩img
gulp.task('img', function () {gulp.src('images/*.{png,jpg,gif,ico}').pipe(imagemin({progressive: true, //Boolean类型 默认:false 无损压缩图片optimizationLevel: 5, //number类型 默认:3 取值范围:0-7(优化等级)interlced: true, //Boolean类型 默认false 隔行扫描gif进行渲染multipass: true //Boolean类型 默认false 多次优化svg直到完全优化})).pipe(gulp.dest('build/images')) //输入到build文件夹下的images文件夹下
})// 4.压缩html
gulp.task('html', function () {gulp.src('*.html') //指定当前文件夹下的所有html文件.pipe(minhtml()) //进行压缩.pipe(gulp.dest('build')) //将压缩后的文件输出到build文件夹下.pipe(browserSync.stream()); //自动打开浏览器})// 定义path
var path = {css: './css/*.css',js: './js/*.js',html: './*.html',src: './build'
};// 命令行输入gulp或者 gulp default的时候就会执行
gulp.task('default', function(){//把任务串联起来gulp.start('js', 'css', 'img', 'html');//打开静态服务器browserSync.init({server:{baseDir: path.src},port:3000,open:false}, function(){var homepage = 'http://localhost:3000/';opn(homepage);});//监听文件的变化实时编译 然后刷新gulp.watch([path.html, path.js, path.css]).on("change", function() {gulp.start('js', 'css', 'img', 'html');        browserSync.reload();});
});

3.效果

4.github项目源代码

https://github.com/zhalice2011/gulp-postcss

附:vm布局及使用的图片参考自大漠老师的博文: 《再聊移动端页面的适配》

2018移动端页面适配-自适应最新方案直接写px--------通过gulp工作流搭建一体化的移动端开发环境相关推荐

python四大软件-传智播客解析Python之移动端页面适配四大方式
前端在制作移动端页面时,会碰到适配各种手机屏幕的问题,而且还包括平板电脑,这么多种分辨率的屏幕,如何做到适配呢?传智播客为此总结了四种方式,具体如下: 传智播客解析Python之移动端页面适配四大方式 ...
python 3.5.2设计页面_怎么解决win10系统搭建Python 3.5.2开发环境的处理方案
今天小编告诉大家如何对win10系统搭建Python 3.5.2开发环境进行设置,可能很多用户都不知道怎么对win10系统搭建Python 3.5.2开发环境进行设置,但当我们遇到对win10系统搭建 ...
python 3.5.2页面_笔者操作win10系统搭建Python 3.5.2开发环境的详细方案
win10系统性能稳定受到广大用户的喜爱,但也不尽完美,在使用过程中,难免会遇到win10系统搭建Python 3.5.2开发环境的问题.碰到win10系统搭建Python 3.5.2开发环境的问题. ...
移动端页面适配———多方案解析
移动互联网快速发展的今天,手机的种类和尺寸越来越多,作为前端的小伙伴们可能会越来越头疼,但又不得不去适配一款又一款的新机型.对于移动端适配,不同的公司.不同的团队有不同的解决方案.我在项目中也用了一部 ...
一段代码把PC端页面适配手机端
在PC端的代码中加入这段代码,及实现手机端页面的自适应,是个人目前觉得最好用的方法! <script type="text/javascript"> ...
移动端页面适配解决方案
一.流体布局所谓的流体布局,就是用百分比来定义宽度,最外层容器的宽度设置为100%,就可以适配不同的屏幕,子元素按照比例来设置百分比,子元素整体的百分比之和就是100%,但是如果有子元素设置了边框, ...
PC端页面适配px转rem
rem是相对长度单位,页面布局需要在不同比例的pc端显示同样大小的页面,不希望在分辨率比较高的屏幕上页面就很小. 一般设计稿都是px单位,在开发的时候也会用到px单位.如果在开发前,可以利用vscod ...
pc端rem适配_聊聊PC端页面适配
目前pc并没有像移动端那样,可以用rem单位这种一站式解决方案,因为pc需要考虑低级浏览器,媒体查询和background-size这些新属性都不能用. 设计稿:1920/(1080-190) = 2 ...
华山服务器安装linux系统,RHEL7/Centos7下使用QEMU搭建u-boot+Linux+NFS嵌入式开发环境（2018...
目录 1交叉编译环境搭建交叉编译器下载链接: 1.1交叉编译器下载将其下载到/usr目录下并解压. 解压命令: tar -xvf gcc-linaro-7.2.1-2017.11-i686_arm ...

2018移动端页面适配-自适应最新方案直接写px--------通过gulp工作流搭建一体化的移动端开发环境

1.开始

2.代码

3.效果

4.github项目源代码

2018移动端页面适配-自适应最新方案直接写px--------通过gulp工作流搭建一体化的移动端开发环境相关推荐

最新文章

热门文章