Vue プロジェクトはモバイル端末の適応を構築および構成します

大胆なスタイル

1. 開発環境のインストール

npm install -g cnpm --registry=https://registry.npm.taobao.org  全局安装淘宝镜像

cnpm install --global vue-cli
vue init webpack my-project
cd my-project 
cnpm install 
cnpm run dev

2. rem レイアウトを使用し、フレキシブルにインストールする

npm i lib-flexible --save

3.main.jsにlib-flexibleを導入する

  import 'lib-flexible'

4. ルートディレクトリindex.htmlにメタタグを追加します。

<meta name='viewport' content='width=device-width,initial-scale=1.0'>

5. px を rem に変換し、px2rem-loader をインストールします

  npm i px2rem-loade --save-dev

6. px2rem-loader build/utils.js を設定します。

var cssLoader = {
  loader: 'css-loader',
  options: {
    minimize: process.env.NODE_ENV === 'production',
    sourceMap: options.sourceMap
  }
}
var px2remLoader = {
  loader: 'px2rem-loader',
  options: {
    remUnit: 100
  }
}
function generateLoaders(loader, loaderOptions) {
  var loaders = options.usePostCSS ? [cssLoader, postcssLoader,px2remLoader] : [cssLoader,px2remLoader]
}

7. px2rem を使用して CSS を外部参照する場合、px は rem に変換されないため、node_modules に存在する必要があります

function refreshRem(){
        var width = docEl.getBoundingClientRect().width;
        if (width / dpr > 540) {
            width = 540 * dpr;
        }
        var rem = width /7.5;   //将10改为7.5
        docEl.style.fontSize = rem + 'px';
        flexible.rem = win.rem = rem;
    }

これがセットアップです。外部 CSS は 1re100px を使用し、内部 CSS は px を直接使用して自動的にコンパイルされる必要があります。