Vueプロジェクトにはレムレイアウトリストが装備されています

Vueプロジェクトはレムレイアウトを適応させます

remの原理は、物理ピクセルpxを100の部分に分割し、各部分は1remです。たとえば、携帯電話がApple 6sで、物理ピクセルが375pxの場合、remは37.5pxです。プラグインは、htmlルートタグのフォント属性font-sizeを1remに設定し、変換によってcssのpxを対応するremに変換します。画面のサイズをズームするときに、htmlの下のfont-sizeを変更すると、他のタグのサイズと距離もスケーリングされて、remアダプティブレイアウトが実現されることがわかります。

1）インストールの依存関係

npm i lib-flexible postcss-px2rem --save

2）index.htmlの<meta name = 'viewport'>ビューポートタグを削除します

Flexibleは、画面に応じて<meta name='viewport' >タグ、動的制御initial-scale，maximum-scale，minimum-scale、およびその他の属性値をページに自動的に追加します。削除しないと、追加が繰り返され、コードの冗長性が発生します。

3）エントリファイルmain.jsに依存関係を導入します

import 'lib-flexible'

4）vue.config.jsファイルを構成します

module.exports = {
    
    
  devServer: {
    
    
    port: 3000,
    open: true
  },
  // rem 的配置
  css: {
    
    
    loaderOptions: {
    
    
      css: {
    
    },
      postcss: {
    
    
        plugins: [
          require('postcss-px2rem')({
    
    
            // 适配375px屏幕 设计图750中量出来的尺寸要 / 2
            remUnit: 37.5
          })
        ]
      }
    }
  }
}