溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

vue.js實(shí)現(xiàn)移動(dòng)端適配的方法

發(fā)布時(shí)間：2020-12-10 10:42:47 來源：億速云 閱讀：171 作者：小新 欄目：編程語言

這篇文章給大家分享的是有關(guān)vue.js實(shí)現(xiàn)移動(dòng)端適配的方法的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考。一起跟隨小編過來看看吧。

vue.js實(shí)現(xiàn)移動(dòng)端適配的方法：1、使用rem布局，在主入口【index.html】，【<head>】標(biāo)簽內(nèi)添加相關(guān)JS代碼；2、使用【lib-flexible】插件實(shí)現(xiàn)。

vue.js實(shí)現(xiàn)移動(dòng)端適配的方法：

一、方法一：rem 布局

在主入口：index.html，<head> 標(biāo)簽內(nèi)添加如下JS 代碼：（實(shí)現(xiàn)在標(biāo)準(zhǔn) 375px寬度適配下，100px = 1rem。）

  <script>
    (function () {
      // 在標(biāo)準(zhǔn) 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('html').style.fontSize = rem + 'px';
      }
      set();
      window.addEventListener('resize', set);
    }());
   
  </script>

二、方法二：lib-flexible 插件實(shí)現(xiàn)

1、安裝插件

npm i lib-flexible --save        // 載lib-flexible
npm install px2rem-loader        // 安裝px2rem-loader

2、在main.js中引入lib-flexible

import 'lib-flexible/flexible'

3、在 index.html 中添加：移動(dòng)適配 meta標(biāo)簽

<meta name="viewport" content="width=device-width,initial-scale=1.0">
//注意這兩個(gè)的區(qū)別，建議添加下面的meta，反正點(diǎn)擊輸入框，頁面自動(dòng)縮放
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

4、更改配置

在 build/util.js 中 按如下兩更改

（1）、將px2rem-loader添加到cssLoaders中

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

（2）、在generateLoaders方法中添加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)
    }
  }

總結(jié)要修改的地方

vue.js實(shí)現(xiàn)移動(dòng)端適配的方法

5、重啟

npm run dev  // 重新運(yùn)行

這里需要注意：

1、 lib-flexible：是 rem 的適配插件。（例：750px == 10rem）

2、px2rem-loader ：是為了方便在書寫CSS時(shí)，輸入 px 會(huì) 自動(dòng)轉(zhuǎn)為 rem。

3、有時(shí) 用 ‘px2rem-loader ’ 插件，發(fā)現(xiàn) rem 轉(zhuǎn)換不正確?？赡苁情_發(fā)工具設(shè)置了其他的插件轉(zhuǎn)換，將其他的插件轉(zhuǎn)換設(shè)置為想要的轉(zhuǎn)換就行。

感謝各位的閱讀！關(guān)于vue.js實(shí)現(xiàn)移動(dòng)端適配的方法就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手