vue足場の移動が適切--pxをremに変換

本稿の目標は,一連の構成により,開発において設計図の寸法開発を直接用いることができ,プロジェクトは自動的にコンパイルされremに変換されることである.
テクノロジースタック
vue-cli:足場ツールを使用してプロジェクトを作成します.postcss-pxtorem:pxをremに変換するプラグイン.
ルートノードhtmlのfont-sizeを自動的に設定
rem単位はルートノードに対するフォントサイズであるため、ルートノードのフォントサイズを設定することでremのサイズを動的に変更することができる.
1.rem.jsファイルの作成// const baseSize = 32 // rem function setRem () { // 750 ， 。 const scale = document.documentElement.clientWidth / 750 // document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px' } // setRem() // rem window.onresize = function () { setRem() }
2、main.jsにrem.jsを導入import './utils/rem'ファイルを導入した後、ページのhtmlノードにfont-sizeが自動的に追加されたかどうかを確認します.注意:ここまで完成すると、remレイアウトが実現し、実際に開発する際には、対応するrem値を計算して開発する必要があります.次にwebpackを構成し、pxを対応するrem値に自動的に変換します.
postcss-pxtorem自動変換pxをremに設定
1、postcss-pxtoremのインストール$ npm install postcss-pxtorem -D、ルートディレクトリを修正する.postcssrc.jsファイルはplugins属性新規pxtoremの設定"postcss-pxtorem": { "rootValue": 32, "propList": ["*"] }を見つけ、上記の構成項目に従って開発中にpx単位で直接開発することができる.例えば、設計図が750*1136である場合、body { width: 750px; height: 1136px; }がbody { widht: 23.4375rem; height: 35.5rem; }に直接ページに書くことができ、この方法はimport和をサポートする.vue単一ファイルのstyle.styleで@import url()を使用することはしばらくサポートされていません.