关于使用vw单位适配H5项目（二）

时间：2023-11-28 23:23:38

一些比较小的H5页面，我觉得全没有必要一定要使用框架的，比如vue和react之类的，我觉得原生的js,html5也可以写好移动端。

最近刚好要赶10多个h5页面，适配移动端的，各种手机型号都要适配，笔者想起了自己的以前写过的一个转换小工具,

大家可以看之前我的文章和我一起使用postcss+gulp进行vw单位的移动端的适配

老实说，笔者根据之前的记录，根本就没有还原出小工具，实在是汗颜。不过，在笔者实在无法精确还原工具之后，笔者找到了之前练习的demo.

笔者一下子就搞定了。

先给大家看下项目的目录：

关于使用vw单位适配H5项目（二）

笔者吃亏就是吃亏在项目目录最后还原的时候没有对应上。

一般的话，对于工程化的项目其实知道了package.json文件，整个项目的核心其实已经出来了。

{

  "devDependencies": {

    "gulp": "^3.9.1",

    "gulp-cssnano": "^2.1.3",

    "gulp-postcss": "^7.0.1",

    "gulp-rename": "^1.2.2",

    "gulp-sass": "^4.0.1",

    "gulp-sourcemaps": "^2.6.4",

    "postcss-assets": "^5.0.0",

    "postcss-cssnext": "^3.1.0",

    "postcss-px-to-viewport": "^0.0.3",

    "postcss-short": "^4.1.0",

    "postcss-short-color": "^3.0.0",

    "postcss-viewport-units": "^0.1.6",

    "postcss-write-svg": "github:jonathantneal/postcss-write-svg"

  },

  "dependencies": {

    "autoprefixer": "^9.4.10",

    "postcss-aspect-ratio-mini": "^0.0.2"

  }

}
var gulp=require('gulp');

var postcss=require('gulp-postcss');

var sass=require('gulp-sass');

var shortColor = require('postcss-short-color');

var autoprefixer = require('autoprefixer');

var cssnext = require('postcss-cssnext');

var shortcss = require('postcss-short');

var pxtoviewport = require('postcss-px-to-viewport');

var sourcemaps=require('gulp-sourcemaps');

var rename=require('gulp-rename');

var cssnano=require('gulp-cssnano');

gulp.task('css',function(){

    var processors=[

        require('postcss-short-color'),

        shortcss,

        cssnext,

        autoprefixer({browsers: ['> 1%'], cascade: false}),

         pxtoviewport({

            viewportWidth: 750, // 视窗的宽度，对应的是我们设计稿的宽度，一般是750

            //viewportHeight: 1334, // 视窗的高度，根据750设备的宽度来指定，一般指定1334，也可以不配置

            unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数（很多时候无法整除）

            viewportUnit: 'vw', // 指定需要转换成的视窗单位，建议使用vw

            selectorBlackList: ['.ignore', '.hairlines'], // 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名

            minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值

            mediaQuery: false // 允许在媒体查询中转换`px`著作权归作者所有。

        }),

        require('postcss-write-svg'),

        require('postcss-aspect-ratio-mini'),

        require('postcss-viewport-units'),

    ];

    return gulp.src('./src/css/*.scss').pipe(sass().on('error',sass.logError))

    .pipe(postcss(processors))

    .pipe(gulp.dest('./dest'));

});

 gulp.task('rename',['css'],function(){

    return gulp.src('dest/style.css')

            .pipe(postcss([cssnano]))

            .pipe(rename('style.min.css'))

            .pipe(sourcemaps.init())

            .pipe(sourcemaps.write('maps/'))

            .pipe(gulp.dest('./dest'))

    });

gulp.task('default',['css','rename']);

// 监听功能

var watcher=gulp.watch('src/*.css',['default']);

watcher.on('change',function(event){

    console.log('File'+event.path+'was'+event.type+',running tasking ...');

});

我稍微把项目运行了一下

关于使用vw单位适配H5项目（二）

完整项目的地址

https://github.com/JserJser/dailyPush/blob/master/daily5/toolsForH5.rar

其实大家分析我的项目就会发现，就是一个很简单很普通但是确实很方便的h5适配方法

大家运行过程中什么插件没有安装上去大家就安装，有问题就删nodejs包，这个是个出浅的存在很多问题但是可以解决问题的小工具

大家可以放心使用的，之前有使用这个，项目成功上线过的

这个工具我打算好好做起来了，这个是第一版本，希望时时努力，别抛弃别放弃,后续会添加 webpack之类的，一起加油加油撒花

相关文章