vue 移動(dòng)端適配方案詳解
更新時(shí)間：2018年11月15日 11:19:14 作者：大大的小小小心愿
這篇文章主要介紹了vue 移動(dòng)端適配方案詳解，詳細(xì)的介紹2種方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
一、方法一：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)擊輸入框，頁(yè)面自動(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é)要修改的地方
添加位置.png
5、重啟
npm run dev // 重新運(yùn)行
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue項(xiàng)目中大文件切片上傳實(shí)現(xiàn)秒傳與斷點(diǎn)續(xù)傳的詳細(xì)實(shí)現(xiàn)過(guò)程
這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目中大文件切片上傳實(shí)現(xiàn)秒傳與斷點(diǎn)續(xù)傳的詳細(xì)實(shí)現(xiàn)過(guò)程, 在開(kāi)發(fā)中,如果上傳的文件過(guò)大,可以考慮分片上傳,分片就是說(shuō)將文件拆分來(lái)進(jìn)行上傳,將各個(gè)文件的切片傳遞給后臺(tái),然后后臺(tái)再進(jìn)行合并,需要的朋友可以參考下2023-08-08
關(guān)于element-ui表單中限制輸入純數(shù)字的解決方式
這篇文章主要介紹了關(guān)于element-ui表單中限制輸入純數(shù)字的解決方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09
van-dialog彈窗異步關(guān)閉功能-校驗(yàn)表單實(shí)現(xiàn)
有時(shí)候我們需要通過(guò)彈窗去處理表單數(shù)據(jù)，在原生微信小程序配合vant組件中有多種方式實(shí)現(xiàn)，其中UI美觀度最高的就是通過(guò)van-dialog嵌套表單實(shí)現(xiàn)，這篇文章主要介紹了van-dialog彈窗異步關(guān)閉-校驗(yàn)表單,需要的朋友可以參考下2023-11-11
Vue中commit和dispatch區(qū)別及用法辨析(最新)
在Vue中,commit和dispatch是兩個(gè)用于觸發(fā)Vuex store中的mutations和actions的方法,這篇文章主要介紹了Vue中commit和dispatch區(qū)別及其用法辨析,需要的朋友可以參考下2024-06-06
vue?批量自動(dòng)引入并注冊(cè)組件或路由實(shí)現(xiàn)詳解
這篇文章主要為大家介紹了vue?批量自動(dòng)引入并注冊(cè)組件或路由實(shí)現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
vue實(shí)現(xiàn)虛擬列表組件解決長(zhǎng)列表性能問(wèn)題
這篇文章主要介紹了在vue中實(shí)現(xiàn)虛擬列表組件，解決長(zhǎng)列表性能問(wèn)題,本文給大家分享實(shí)現(xiàn)思路及實(shí)例代碼，需要的朋友可以參考下2022-07-07
錯(cuò)誤處理是框架設(shè)計(jì)的核心要素之一,框架的錯(cuò)誤處理好壞,直接決定用戶應(yīng)用程序的健壯性以及用戶開(kāi)發(fā)應(yīng)用時(shí)處理錯(cuò)誤的心智負(fù)擔(dān),本文將從源碼入手,剖析一下Vue3中是如何進(jìn)行錯(cuò)誤處理的,需要的可以參考下2024-01-01
如何在vue項(xiàng)目中嵌入jsp頁(yè)面的方法(2種)
這篇文章主要介紹了如何在vue項(xiàng)目中嵌入jsp頁(yè)面的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
這篇文章主要介紹了vue項(xiàng)目支付功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-01-01
分頁(yè)是很多頁(yè)面都需要實(shí)現(xiàn)的一個(gè)功能，這篇文章主要介紹了Vue全局分頁(yè)組件的實(shí)現(xiàn)代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-08-08