flonny/pxToVw-css

移动端适配方案,webpack 插件

pxToVw

• 移动端适配方案

• 设置屏幕宽度 或者 设计稿宽度为750px（宽）

• 100vw = 750

• 1个单位（宽） 为 （100/750)vw

• 如果设计稿宽度为640px

• 将设置宽度改为640px

• 通过sass 函数去进行页面布局

使用

git clone https://github.com/fanyuedong/pxToVw.git
cd pxToVw
npm install
gulp

核心函数

$screenwidth: 750;
@function pxToVw($n) {
  @return unquote($n * 100/$screenwidth+'vw');
}

使用

@import 'pxToVw';
body{
  padding: 0;
  margin: 0;
}


.temp {
  text-align: center;
  font-size: pxToVw(200);
  line-height: pxToVw(280);
  opacity: 0.8;
}

.weather {
  font-size: pxToVw(40);
  line-height: pxToVw(56);
  opacity: 0.65;
  text-align: center;
}

.weather-wrapper {
  position: relative;
  padding-top: pxToVw(174);
  padding-bottom: pxToVw(250);
}

.weather-bg {
  z-index: -1;
  top: 0;
  left: 0;
  position: absolute;
  width: 100%;
  height: 100%;
}

.timetips {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: pxToVw(40);
  margin-bottom: pxToVw(45);
}

.timetips-icon {
  margin-right: pxToVw(10);
  width: pxToVw(36);
  height: pxToVw(28);
}

.timetips-text {
  font-size: pxToVw(30);
  line-height: pxToVw(42);
  opacity: 0.5;
}

.forecast-lsit {
  display: flex;
  width:pxToVw(750);
  overflow: scroll;
}

---

gulp3 升级 gulp4 遇到的报错

问题一

Task function must be specified

解决

gulp.task('default', ['styles', 'script'], () => {
  gulp.watch('./sass/**/*.scss', ['styles']);
  gulp.watch('./js/**/*.js', ['script']);
  browsersync.init({
    watch: true,
    server: './',
  });
});

修改为

gulp.task('default', gulp.series('styles', 'script', () => {
  gulp.watch('./sass/**/*.scss', ['styles']);
  gulp.watch('./js/**/*.js', ['script']);
  browsersync.init({
    watch: true,
    server: './',
  });
}));

问题二

Task never defined: styles

解决

将 task('styles',function(){}) 放置在 task('defined',function(){}) 前

问题三

Cannot read property 'apply' of undefined

解决

npm i gulp-cli -g

问题四

The following tasks did not complete

解决

gulp.task('styles', () => {
  gulp.src('./sass/**/*.scss')
    .pipe(sass.sync({
      outputStyle: 'compressed',
    }).on('error', sass.logError))
    .pipe(autoprefixer({
      browsers: ['last 2 versions'],
    }))
    .pipe(gulp.dest('./css'));
});

修改为

gulp.task('styles', (done) => {
  gulp.src('./sass/**/*.scss')
    .pipe(sass.sync({
      outputStyle: 'compressed',
    }).on('error', sass.logError))
    .pipe(autoprefixer({
      browsers: ['last 2 versions'],
    }))
    .pipe(gulp.dest('./css'));
  done();
});

问题五

Error: watching ./sass/**/*.scss: watch task has to be a function (optionally generated by using gulp.parallel or gulp.series)

解决

与问题一解决方法一致