https://github.com/flonny/pxtovw-css
移动端适配方案,webpack 插件
https://github.com/flonny/pxtovw-css
gulp px rem sass vw
Last synced: 26 days ago
JSON representation
移动端适配方案,webpack 插件
- Host: GitHub
- URL: https://github.com/flonny/pxtovw-css
- Owner: flonny
- Created: 2018-10-24T01:40:28.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2022-12-02T14:44:56.000Z (over 3 years ago)
- Last Synced: 2025-10-14T18:43:46.656Z (8 months ago)
- Topics: gulp, px, rem, sass, vw
- Language: HTML
- Homepage: https://github.com/flonny/pxtovw-loader
- Size: 867 KB
- Stars: 2
- Watchers: 0
- Forks: 0
- Open Issues: 15
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# pxToVw
- 移动端适配方案
- 设置屏幕宽度 或者 设计稿宽度为750px（宽）
- 100vw = 750
- 1个单位（宽） 为 （100/750)vw
- 如果设计稿宽度为640px
- 将设置宽度改为640px
- 通过sass 函数去进行页面布局
### 使用
```
git clone https://github.com/fanyuedong/pxToVw.git
cd pxToVw
npm install
gulp
```
#### 核心函数
```scss
$screenwidth: 750;
@function pxToVw($n) {
@return unquote($n * 100/$screenwidth+'vw');
}
```
#### 使用
```scss
@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 遇到的报错
#### 问题一
```js
Task function must be specified
```
#### 解决
```js
gulp.task('default', ['styles', 'script'], () => {
gulp.watch('./sass/**/*.scss', ['styles']);
gulp.watch('./js/**/*.js', ['script']);
browsersync.init({
watch: true,
server: './',
});
});
```
修改为
```js
gulp.task('default', gulp.series('styles', 'script', () => {
gulp.watch('./sass/**/*.scss', ['styles']);
gulp.watch('./js/**/*.js', ['script']);
browsersync.init({
watch: true,
server: './',
});
}));
```
#### 问题二
```js
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)
```
#### 解决
> 与问题一解决方法一致