Vue.jsモバイル端末に適したvwソリューション
1.PostCssプラグインのインストールと構成
npm i postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext postcss-viewport-units cssnano --S
cssnano-preset-advancedのインストールも必要です
npm i cssnano-preset-advanced --save-dev
2.PostCssの構成
ルートディレクトリにある
.postcssrc.js
を見つけて、PostCSSプラグインを構成します.module.exports = {
"plugins": {
"postcss-import": {},
"postcss-url": {},
// to edit target browsers: use "browserslist" field in package.json
"postcss-write-svg": {
uft8: false
},
"postcss-cssnext": {},
"postcss-px-to-viewport": {
viewportWidth: 750, // , , 750
viewportHeight: 1334, // , 750 , 1334,
unitPrecision: 3, // `px` ( )
viewportUnit: 'vw', // , vw
selectorBlackList: ['.ignore', '.hairlines'], // , , ,
minPixelValue: 1, // `1px` ,
mediaQuery: false // `px`
},
"postcss-viewport-units": {},
"cssnano": {
preset: "advanced",
autoprefixer: false, // cssnext autoprefixer,
"postcss-zindex": false
}
}
}
3.viewport-units-buggyfillを導入して互換性の問題を解決する
index.html
にjsを導入
window.onload = function () {
window.viewportUnitsBuggyfill.init({ hacks: window.viewportUnitsBuggyfillHacks });
}
4.問題と解決策
グローバル導入CSSスタイル
img { content: normal !important; }
warning in ./node_modules/mint-ui/lib/style.css
(Emitted value instead of an instance of Error) postcss-viewport-units: /Users/Wyj/Workspace/imglive/wx/node_modules/mint-ui/lib/style.css:267:1: '.mint-cell-allow-right::after' already has a 'content' property, give up to overwrite it.
@ ./node_modules/mint-ui/lib/style.css 4:14-118 13:3-17:5 14:22-126
@ ./src/plugins/mint-ui/index.js
@ ./src/plugins/index.js
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://0.0.0.0:8080 webpack/hot/dev-server ./src/main.js
postcss-px-to-viewport
は自己修正可能node_modulesでは
postcss-px-to-viewport
が見つかり、index.js
を開いてexcludeオプションの処理を追加します.module.exports = postcss.plugin('postcss-px-to-viewport', function (options) {
var opts = objectAssign({}, defaults, options);
var pxReplace = createPxReplace(opts.viewportWidth, opts.minPixelValue, opts.unitPrecision, opts.viewportUnit);
return function (css) {
css.walkDecls(function (decl, i) {
if (options.exclude) { // exclude
if (Object.prototype.toString.call(options.exclude) !== '[object RegExp]') {
throw new Error('options.exclude should be RegExp!')
}
if (decl.source.input.file.match(options.exclude) !== null) return;
}
// This should be the fastest test and will remove most declarations
if (decl.value.indexOf('px') === -1) return;
if (blacklistedSelector(opts.selectorBlackList, decl.parent.selector)) return;
decl.value = decl.value.replace(pxRegex, pxReplace);
});
if (opts.mediaQuery) {
css.walkAtRules('media', function (rule) {
if (rule.params.indexOf('px') === -1) return;
rule.params = rule.params.replace(pxRegex, pxReplace);
});
}
};
});
.postcssrc.js
にpostcss-px-to-viewport
のexclude
オプションを追加します."postcss-px-to-viewport": {
viewportWidth: 750,
viewportHeight: 1334,
unitPrecision: 3,
viewportUnit: 'vw',
selectorBlackList: ['.ignore', '.hairlines'],
minPixelValue: 1,
mediaQuery: false,
exclude: /(\/|\\)(node_modules)(\/|\\)/
},
あるいは改良版の
postcss-px-to-viewport-opt
を使用するnpm install postcss-px-to-viewport-opt -S
そして
.postcssrc.js
にpostcss-px-to-viewport-opt
を配置する'postcss-px-to-viewport-opt': {
viewportWidth: 375, // , , 750
viewportHeight: 1334, // , 750 , 1334,
unitPrecision: 3, // `px` ( )
viewportUnit: 'vw', // , vw
selectorBlackList: ['.ignore', '.hairlines'], // , , ,
minPixelValue: 1, // `1px` ,
mediaQuery: false, // `px`
exclude: /(\/|\\)(node_modules)(\/|\\)/
},
5.参考資料
Vue+tsの下の移動端vw適合(サードパーティライブラリcss問題)移動端ページの適合について、Vueプロジェクトでvwを使用して移動端適合を実現する方法について説明します.
原文アドレス:Vue.jsモバイル端末に適したvwソリューション