基於nodejs（koa2）服務實現圖片檔案的上傳功能

阿新 • • 發佈：2022-03-09

注意

視口單位中的“視口”，桌面端指的是瀏覽器的可視區域；移動端指的就是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()使用。