基于nodejs（koa2）服务实现图片文件的上传功能

注意

视口单位中的“视口”，桌面端指的是浏览器的可视区域；移动端指的就是Viewport中的Layout Viewport。

使用这个方案有一点千万别忘了，记得在加入：

<meta name="viewport" content="width=device-width,
initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" 
/>

一、安装gulp及对应组件

全局安装 gulp：

yarn global add gulp

作为项目的开发依赖（devDependencies）安装：

yarn add -D gulp
yarn add -D gulp-less
yarn add -D gulp-postcs
yarn add -D gulp-rename
yarn add -D postcss-px-to-viewport

二.新增gulpfile.js

在项目根目录下创建一个名为 gulpfile.js 的文件：

里面书写以下代码：

const { src, dest, watch, task, series } = require('gulp');
var less = require('gulp-less');
var postcss = require('gulp-postcss');
var rename = require('gulp-rename');
var pxtoviewport = require('postcss-px-to-viewport');

function buildCss() {
	//配置的参数
	var processors = [
		pxtoviewport({
			unitToConvert: 'px',
			viewportWidth: 750, //视窗的宽度，对应的是我们设计稿的宽度，一般是750
			viewportHeight: 1334, // 视窗的高度，根据750设备的宽度来指定，一般指定1334，也可以不配置
			unitPrecision: 5, // 指定`px`转换为视窗单位值的小数位数（很多时候无法整除）
			viewportUnit: 'vw', // 指定需要转换成的视窗单位，建议使用vw
			fontViewportUnit: 'vw', // vmin is more suitable.
			selectorBlackList: [],
			minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
			mediaQuery: false, // 允许在媒体查询中转换`px`
		}),
	];
	return (
		src(['src/style/*.less']) //原始css路径
			.pipe(less())
			.pipe(postcss(processors)) //这是自动编译px为vw单位
			.pipe(rename({ extname: '.min.css' })) 
			.pipe(
				dest('src') //编译后的路径
			)
	);
}

//监听文件变化，自动编译
function watchCss() {
	const watcher = watch(['src/style/*.less'], buildCss);
	watcher.on('change', function (path, stats) {
		console.log(`File ${path} was changed,running tasks...`);
	});
}

exports.default = buildCss;
exports.watchCss = watchCss;

三.修改package.json

加执行命令

	"scripts": {
		"build": "gulp",
		"watch": "gulp watchCss"
	},

示例：

原始样式文件如下：

.hex-login-box {
	width: 625px;
	margin: 0 auto;
}
.logo {
	width: 366px;
	height: 200px;
	margin: 96px auto 0 auto;
	background-image: url(./logo.svg);
	background-size: 100% 100%;
}

.form-wrap {
	margin: 88px auto 0 auto;
	.form-item {
		margin-top: 16px;
	}
	.form-footer {
		margin-top: 72px;
	}
}


.hex-input {
	width: 622px;
	height: 88px;
	box-sizing: border-box;
	line-height: 88px;
	font-family: PingFang SC;
	font-size: 24px;
	font-weight: 400;
	padding-left: 30px;
	color: #bfbfbf;
	border: 1px solid #ccc;
	background: #f6f6f6;
	border-radius: 16px;
}

.hex-button {
	width: 622px;
	height: 96px;
	font-size: 32px;
	color: #ffffff;
	background: #276ef1;
	border-radius: 16px;
	border: none;
	cursor: pointer;
	margin-bottom: 16px;
}

.hex-button-affirm {
	box-shadow: 0px 10px 26px rgba(39, 110, 241, 0.2);
	border: none;
}

.hex-button-cancel {
	color: #276ef1;
	background: #ffffff;
	border: 1px solid #276ef1;
}

执行 yarn run build (其实最终是执行的 gulp buildCss )

生产的文件如下：

.hex-login-box {
  width: 83.33333vw;
  margin: 0 auto;
}
.logo {
  width: 48.8vw;
  height: 26.66667vw;
  margin: 12.8vw auto 0 auto;
  background-image: url(./logo.svg);
  background-size: 100% 100%;
}
.form-wrap {
  margin: 11.73333vw auto 0 auto;
}
.form-wrap .form-item {
  margin-top: 2.13333vw;
}
.form-wrap .form-footer {
  margin-top: 9.6vw;
}
.hex-input {
  width: 82.93333vw;
  height: 11.73333vw;
  box-sizing: border-box;
  line-height: 11.73333vw;
  font-family: PingFang SC;
  font-size: 3.2vw;
  font-weight: 400;
  padding-left: 4vw;
  color: #bfbfbf;
  border: 1px solid #ccc;
  background: #f6f6f6;
  border-radius: 2.13333vw;
}
.hex-button {
  width: 82.93333vw;
  height: 12.8vw;
  font-size: 4.26667vw;
  color: #ffffff;
  background: #276ef1;
  border-radius: 2.13333vw;
  border: none;
  cursor: pointer;
  margin-bottom: 2.13333vw;
}
.hex-button-affirm {
  box-shadow: 0px 1.33333vw 3.46667vw rgba(39, 110, 241, 0.2);
  border: none;
}
.hex-button-cancel {
  color: #276ef1;
  background: #ffffff;
  border: 1px solid #276ef1;
}

其实这里重要是动态实现px到vw的转换工作。

存在的问题

使用vw有一些细节之处还是存在一定的缺陷的。比如当容器使用vw单位，margin采用px单位时，很容易造成整体宽度超过100vw，从而影响布局效果。对于这个问题，我们可以将margin换成padding，并且配合box-sizing解决。随着将来浏览器或者应用自身的Webview对calc()函数的支持之后，碰到vw和px混合使用的时候，可以结合calc()使用。