vue.js實現(xiàn)移動端適配的方法

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

創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),錫林浩特企業(yè)網(wǎng)站建設(shè),錫林浩特品牌網(wǎng)站建設(shè),網(wǎng)站定制,錫林浩特網(wǎng)站建設(shè)報價,網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,錫林浩特網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強企業(yè)競爭力。可充分滿足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時我們時刻保持專業(yè)、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網(wǎng)站。

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

vue.js實現(xiàn)移動端適配的方法：

一、方法一：rem 布局

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

二、方法二：lib-flexible 插件實現(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 中添加：移動適配 meta標(biāo)簽


//注意這兩個的區(qū)別，建議添加下面的meta，反正點擊輸入框，頁面自動縮放

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實現(xiàn)移動端適配的方法

5、重啟

npm run dev // 重新運行

這里需要注意：

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

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

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

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

當(dāng)前文章：vue.js實現(xiàn)移動端適配的方法
新聞來源：http://m.jiaotiyi.com/article/pcpppe.html

網(wǎng)站建設(shè)知識

vue.js實現(xiàn)移動端適配的方法

其他資訊