vue實現(xiàn)移動端適配步驟如下:

先安裝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)重從左到右降低，沒有則新建文件，只需要設(shè)置其中一個即可：

在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è)計稿寬度除以10進行設(shè)置，這邊假設(shè)設(shè)計稿為375，即rootValue設(shè)為37.5；

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

測試結(jié)果：

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

	.content{
	  width:375px;
	}

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

 以上情況則說明postcss-pxtorem配置成功

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

說明，安裝過程中可能會遇到以下報錯：

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

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

總結(jié)

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

最新評論