vue實(shí)現(xiàn)移動(dòng)端適方案的完整步驟

更新時(shí)間：2022年10月17日 15:33:31 作者：星期五の夜

現(xiàn)在的手機(jī)五花八門,造就了移動(dòng)端窗口分辨率繁多的局面,在不同分辨率的屏幕下保持與UI圖一致的效果,就成了讓前端不得不頭疼的問(wèn)題,下面這篇文章主要給大家介紹了vue實(shí)現(xiàn)移動(dòng)端適方案的相關(guān)資料,需要的朋友可以參考下

vue實(shí)現(xiàn)移動(dòng)端適配步驟如下:

先安裝amfe-flexible和postcss-pxtorem：

npm install amfe-flexible --save
npm install postcss-pxtorem --save

在main.js導(dǎo)入amfe-flexible

import 'amfe-flexible';

配置postcss-pxtorem，可在vue.config.js、.postcssrc.js、postcss.config.js其中之一配置，權(quán)重從左到右降低，沒(méi)有則新建文件，只需要設(shè)置其中一個(gè)即可：

在vue.config.js配置如下：

		module.exports = {
		    //...其他配置
		    css: {
		        loaderOptions: {
		            postcss: {
		                plugins: [
		                    require('postcss-pxtorem')({
		                        rootValue: 37.5,
		                        propList: ['*']
		                    })
		                ]
		            }
		        }
		    },
		}

在.postcssrc.js或postcss.config.js中配置如下：

		module.exports = {
		    "plugins": {
		        'postcss-pxtorem': {
		            rootValue: 37.5,
		            propList: ['*']
		        }
		    }
		}

rootValue根據(jù)設(shè)計(jì)稿寬度除以10進(jìn)行設(shè)置，這邊假設(shè)設(shè)計(jì)稿為375，即rootValue設(shè)為37.5；

propList是設(shè)置需要轉(zhuǎn)換的屬性，這邊*為所有都進(jìn)行轉(zhuǎn)換。

測(cè)試結(jié)果：

css中設(shè)置某類寬度為375px：

	.content{
	  width:375px;
	}

運(yùn)行后在瀏覽器可以發(fā)現(xiàn)已經(jīng)轉(zhuǎn)化為10rem,即375/設(shè)置的rootValue：

以上情況則說(shuō)明postcss-pxtorem配置成功

html的字體大小跟隨設(shè)備寬度進(jìn)行改變，body跟隨設(shè)備的dpr進(jìn)行改變，這是amfe-flexible的實(shí)現(xiàn)，即說(shuō)明配置成功。

說(shuō)明，安裝過(guò)程中可能會(huì)遇到以下報(bào)錯(cuò)：

1.安裝配置后，發(fā)現(xiàn)rem并沒(méi)有生效，解決辦法：使用vue.config.js去配置，不要用postcss.config.js

2.拋錯(cuò)[object Object] is not a PostCSS plugin。報(bào)錯(cuò)原因：postcss-pxtorem版本太高，更改版本為5.1.1。npm install postcss-pxtorem@5.1.1

總結(jié)

到此這篇關(guān)于vue實(shí)現(xiàn)移動(dòng)端適方案的文章就介紹到這了,更多相關(guān)vue實(shí)現(xiàn)移動(dòng)端適內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

基于 Vue.js 之 iView UI 框架非工程化實(shí)踐記錄(推薦)
為了快速體驗(yàn) MVVM 模式，我選擇了非工程化方式來(lái)起步，并選擇使用 Vue.js，以及基于它構(gòu)建的 iView UI 框架。本文給大家分享基于 Vue.js 之 iView UI 框架非工程化實(shí)踐記錄，需要的朋友參考下吧
2017-11-11
vue使用require.context實(shí)現(xiàn)動(dòng)態(tài)注冊(cè)路由
這篇文章主要介紹了vue使用require.context實(shí)現(xiàn)動(dòng)態(tài)注冊(cè)路由的方法，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下
2020-12-12
如何使用VUE+faceApi.js實(shí)現(xiàn)攝像頭拍攝人臉識(shí)別
Face-api.js是一個(gè)JavaScript API,是基于tensorflow.js核心API 的人臉檢測(cè)和人臉識(shí)別的瀏覽器實(shí)現(xiàn),這篇文章主要給大家介紹了關(guān)于如何使用VUE+faceApi.js實(shí)現(xiàn)攝像頭拍攝人臉識(shí)別的相關(guān)資料,需要的朋友可以參考下
2023-05-05
Vue中使用echarts實(shí)現(xiàn)繪制人體動(dòng)態(tài)圖
這篇文章主要為大家詳細(xì)介紹了Vue中如何使用echarts實(shí)現(xiàn)繪制人體動(dòng)態(tài)圖,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2024-03-03
vue開(kāi)發(fā)移動(dòng)端h5環(huán)境搭建的全過(guò)程
在正式使用Vue進(jìn)行移動(dòng)端頁(yè)面開(kāi)發(fā)前,需要做一些前置工作,下面這篇文章主要給大家介紹了關(guān)于vue開(kāi)發(fā)移動(dòng)端h5環(huán)境搭建的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-08-08
vue之監(jiān)聽(tīng)器的使用案例詳解
這篇文章主要介紹了vue之監(jiān)聽(tīng)器的使用案例詳解,本篇文章通過(guò)簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下
2021-09-09
解決vue bus.$emit觸發(fā)第一次$on監(jiān)聽(tīng)不到問(wèn)題
這篇文章主要介紹了解決vue bus.$emit觸發(fā)第一次$on監(jiān)聽(tīng)不到問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-07-07
詳解vue實(shí)現(xiàn)坐標(biāo)拾取器功能示例
這篇文章主要介紹了詳解vue實(shí)現(xiàn)坐標(biāo)拾取器功能示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-11-11
Vue3系列教程之插槽slot詳解
插槽（slot）可以說(shuō)在一個(gè)?Vue?項(xiàng)目里面處處都有它的身影，比如我們使用一些UI?組件庫(kù)的時(shí)候，我們通?？梢允褂貌宀蹃?lái)自定義我們的內(nèi)容，今天通過(guò)本文給大家介紹vue3插槽slot的相關(guān)知識(shí)，感興趣的朋友一起看看吧
2022-08-08
Vue 3 的＜Teleport＞功能與用法詳解
<Teleport> 是 Vue 3 的一個(gè)內(nèi)置組件,允許將組件的內(nèi)容渲染到 DOM 中的任意位置,而不改變其邏輯結(jié)構(gòu),這篇文章主要介紹了Vue 3 的＜Teleport＞功能與用法詳解,需要的朋友可以參考下
2025-04-04