ホームページ > ウェブフロントエンド > Vue.js > vue-cli プロジェクトで vw ユニットを使用するにはどうすればよいですか?

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

青灯夜游
リリース: 2020-11-17 17:58:16
転載
2384 人が閲覧しました

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

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 サイトの他の関連記事を参照してください。

関連ラベル:
ソース:cnblogs.com
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート