How vue.js implements mobile adaptation

Vue.js method to implement mobile terminal adaptation: 1. Use rem layout and add relevant JS code in the main entrance [index.html] and [

] tags; 2. Use [lib -flexible】plug-in implementation.

The operating environment of this tutorial: windows7 system, vue2.9 version, this method is suitable for all brands of computers.

【Recommended related articles: vue.js】

vue.js method to implement mobile adaptation:

1. Method 1: rem layout

Add the following JS code in the main entrance: index.html,

tag: (implemented under standard 375px width adaptation , 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. Method 2: lib-flexible plug-in implementation

1. Install the plug-in

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

2. In main Introduce lib-flexible

import 'lib-flexible/flexible'

in .js 3. Add: mobile adaptation 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">

in index.html 4. Change configuration

in build/util. js, make the following two changes

(1), add px2rem-loader to cssLoaders

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), add px2remLoader

  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)
    }
  }

to the generateLoaders method. Summary: Modified places

5. Restart

npm run dev // Rerun

Need to pay attention here:

1. lib-flexible: It is an adaptation plug-in for rem. (Example: 750px == 10rem)

2. px2rem-loader: For convenience when writing CSS, inputting px will automatically be converted to rem.

3. Sometimes when using the ‘px2rem-loader’ plug-in, it is found that the rem conversion is incorrect. It may be that the development tool has set up other plug-in conversions. Just set the other plug-in conversions to the desired conversion. [I have encountered it before, a huge pit. . . 】

Related free learning recommendations: JavaScript(Video)

The above is the detailed content of How vue.js implements mobile adaptation. For more information, please follow other related articles on the PHP Chinese website!