Wie vue.js die mobile Anpassung implementiert

Vue.js-Methode zur Implementierung der mobilen Terminalanpassung: 1. Verwenden Sie das Rem-Layout und fügen Sie relevanten JS-Code in den Haupteingangs-Tags [index.html] und [

] hinzu. 2. Verwenden Sie den Plug [lib-flexible]. -in erreichen.

Die Betriebsumgebung dieses Tutorials: Windows7-System, Vue-Version 2.9. Diese Methode ist für alle Computermarken geeignet.

【Empfohlene verwandte Artikel: vue.js】

vue.js-Methode zur Implementierung der mobilen Anpassung:

1. Methode 1: Rem-Layout

am Haupteingang: index.html, < ;head> Fügen Sie den folgenden JS-Code in das Tag ein: (Erreicht unter Standard-375px-Breitenanpassung, 100px = 1rem.)

  <script>
    (function () {
      // 在标准 375px 适配下，100px = 1rem;
      var baseFontSize = 100;  
      var baseWidth = 375;
      var set = function () {
        var clientWidth = document.documentElement.clientWidth || window.innerWidth;
        var rem = 100;
        if (clientWidth != baseWidth) {
          rem = Math.floor(clientWidth / baseWidth * baseFontSize);
        }
        document.querySelector(&#39;html&#39;).style.fontSize = rem + &#39;px&#39;;
      }
      set();
      window.addEventListener(&#39;resize&#39;, set);
    }());
   
  </script>

2. Methode 2: lib-flexible Plug-in-Implementierung

1. in

npm i lib-flexible --save        // 载lib-flexible
npm install px2rem-loader        // 安装px2rem-loader

2. Füge lib-flexible in main.js ein

import 'lib-flexible/flexible'

3. Füge in index.html hinzu: Mobile Adaption Meta-Tag

<meta name="viewport" content="width=device-width,initial-scale=1.0">
//注意这两个的区别，建议添加下面的meta，反正点击输入框，页面自动缩放
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

4. Ändere die Konfiguration

Nimm die folgenden zwei Änderungen in build/util.js vor

(1), px2rem-loader zu cssLoaders hinzufügen

const cssLoader = {
    loader: 'css-loader',
    options: {
      minimize: process.env.NODE_ENV === 'production',
      sourceMap: options.sourceMap
    }
  }
  const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      //一般设置75
      remUnit: 35
    }
  }

(2), px2remLoader in der GenerateLoaders-Methode hinzufügen

  function generateLoaders(loader, loaderOptions) {
    const loaders = options.usePostCSS ? [cssLoader, postcssLoader,px2remLoader] : [cssLoader,px2remLoader]
    if (loader) {
      loaders.push({
        loader: loader + '-loader',
        options: Object.assign({}, loaderOptions, {
          sourceMap: options.sourceMap
        })
      })
    }
    // Extract CSS when that option is specified
    // (which is the case during production build)
    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }
  }

Fasse die zu ändernden Stellen zusammen

5. Neustart

npm run dev // Wiederholen

Hier ist Folgendes zu beachten:

1. lib-flexible: Es handelt sich um ein Anpassungs-Plug-in für rem. (Beispiel: 750px == 10rem)

2. px2rem-loader: Dies dient der Bequemlichkeit beim Schreiben von px und wird automatisch in rem konvertiert.

3. Bei Verwendung des Plug-Ins „px2rem-loader“ wird manchmal festgestellt, dass die REM-Konvertierung falsch ist. Möglicherweise hat das Entwicklungstool andere Plug-in-Konvertierungen eingerichtet. Stellen Sie einfach die anderen Plug-in-Konvertierungen auf die gewünschte Konvertierung ein. [Ich bin schon einmal darauf gestoßen, eine riesige Grube. . . 】

Verwandte kostenlose Lernempfehlungen: JavaScript(Video)

Das obige ist der detaillierte Inhalt vonWie vue.js die mobile Anpassung implementiert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!