vue-cli プロジェクトで vw ユニットを使用するにはどうすればよいですか?

次のvue.jsコラムでは、vue-cliプロジェクトでのvwの使用法を紹介します。これは、柔軟性というよりネイティブなモバイル ソリューションです。一定の参考値があるので、困っている友達が参考になれば幸いです。

インストール
コマンド ライン入力:

yarn add postcss-px-to-viewport

または

npm i postcss-px-to-viewport -save -dev

構成
package.json で、postcss にコードを追加します:

"postcss": {
"plugins": {
"autoprefixer": {},
"postcss-px-to-viewport": {
"viewportWidth": 750,
"minPixelValue": 1
}
}
},

Configuration items:
"viewportWidth": 750, //デザイン ドラフトの幅
"unitPrecision": 3, // px を vw および vh
に変換した後に小数点を保持する桁数"minPixelValue": 1, // vw

## に変換されない最小 px 値

#使用シナリオ

vw と vh は、特定の幅 (750 ピクセルであることを思い出してください) 未満のデバイスのピクセルをレムに変換するだけのフレキシブルとは異なり、PC とモバイル端末の両方で効果を生成します。そのため、設計案がモバイル端末向けの場合、健康、vw ユニットをフルに使用すると、PC 側でページのフォントが大きくなりすぎるなど、アプリケーションのシナリオに応じて適切に処理して選択する必要があります。

vue-cli3.0 で lib-flexible/px2rem が導入されました

compatibility

vw/vh ユニットは実際には比較的早くから登場しましたが、以前はサポートがあまり良くありませんでした。ブラウザの開発により、ほとんど (92% 以上) のブラウザがすでに vw/vh

関連する推奨事項:

2020 フロントエンドをサポートしています。 vue の面接の質問の概要 (回答付き)

#vue チュートリアルの推奨事項: 2020 年の最新の 5 つの vue.js ビデオ チュートリアルのセレクション

プログラミングの詳細については、 -関連の知識については、

プログラミング教育

をご覧ください。 ！

以上がvue-cli プロジェクトで vw ユニットを使用するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。