モバイル・エンド・アダプティブ・スキーム-postcss-px-to-viewport

本文は転載で、原文のリンク:

https://blog.csdn.net/Cookysurongbin/article/details/99671673

以前はモバイル端末の適応をしていたが、基本的にremスキームを採用していたが、viewport単位を使うという新しいスキームが発見され、現在viewport単位はますます多くのブラウザのサポートを受けている.postcss-px-to-viewportは、px単位を自動的にviewport単位に変換し、とても簡単です.postcss-px-to-viewportドキュメント

取付

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

vueプロジェクトを導入し、postcss.config.js導入

module.exports = {
  plugins: {
    autoprefixer: {},
    'postcss-px-to-viewport': {
       viewportWidth: 750,   //      ，            ，   750
      viewportHeight: 1334, //      ，  750        ，    1334，      
      unitPrecision: 3,     //   `px`             
      viewportUnit: "vw",   //            ，    vw
      selectorBlackList: ['.ignore'],//             ，     ，      ,             
      minPixelValue: 1,     //      `1px`        ，            
      mediaQuery: false     //           `px`
    }
  }
}

設定パラメータ解析

{
  unitToConvert: 'px'	//(String)       
  viewportWidth: 320,	//viewport   ，  320，          。1440  1440
  unitPrecision: 5,	//  px             ，   5
  propList: ['*'],	//       css  ，   ['*'],          
  viewportUnit: 'vw', //(String)            ，  vw
  fontViewportUnit: 'vw', //(String)               ，  vw
  selectorBlackList: [], //            ，  px，  string   regexp，  1~2      。
  minPixelValue: 1,	//(Number)   1，     `1px`        。
  mediaQuery: false, //           px,  false。
  replace: true, //     vw   ，       。
  exclude: [], //      , node_modules
  landscape: false,
  landscapeUnit: 'vw',
  landscapeWidth: 568
}

起こり得る問題
1、@keyframesとmediaクエリーのpxはデフォルトでは変換されません.mediaQuery:trueを設定するとメディアクエリーでもpxが変換され、@keyframesはvw単位の変換結果を一時的に手動で記入できます.2、変換されていないスタイルがある場合は、そのスタイルがインラインスタイルであるかどうかを確認します.vueテンプレートはstyleラベルにスタイルを書き込む必要があります.