vue/cli3.0 px回転rem,vw/vhの構成

プロジェクトはvue/cli 3にあります.0は移動端を作り、px回転remやvwを配置します.プロジェクトの開発を容易にし、構成内容を記録します.以下は構成内容です.
1.pxtorem pxを使用してremに変換
npm install lib-flexibleまたはyarnadd lib-flexible
デバイスdprと幅に応じてviewportとhtmlルート要素のfont-sizeとremを組み合わせて異なるサイズのモバイル端末デバイスを適応させる
メールでjs導入中:import'lib-flexible/flexible.js'
1.1 npm install postcss-pxtoremまたはyarnadd postcss-pxtorem
packageでjson内、postcss内に追加:
「postcss」:{"plugins":{"autoprefixer":{},"postcss-pxtorem":{"rootValue":75,//設計原稿幅の1/10、(JSONファイルに注釈を付けず、この行の注釈および下り注釈はすべて削除される)「propList」:[*]//変換処理を行う必要がある属性、例えば`hight`、`width`、`margin`など、`*`はすべてを表す}}
1.2またはnpm install--save-dev postcss-loader postcss-px 2 remを使用する
 
vueでconfig.jsでの構成
module.exports = {        css: {        loaderOptions: {               css: {                       //options here will be passed to css-loader               },         postcss: {                   //options here will be passed to postcss-loader                    plugins: [require('postcss-px2rem')({                              remUnit: 75                    })]               }          }      }}
 
2.postcss-px-to-viewportを使う注意:移動端は使いやすいが、pc端では新しいフォントが大きすぎる現象が発生する
npm install postcss-px-to-viewportまたはyarn add postcss-px-to-viewportpackage.jsonで、postcssにコードを追加します.
 
"postcss": {    "plugins": {    "autoprefixer": {},    "postcss-px-to-viewport": {         "viewportWidth": 750,         "minPixelValue": 1        }    } },
転載先:https://www.cnblogs.com/wenxinsj/p/10184982.html