快捷導(dǎo)航

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

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

現(xiàn)在的手機(jī)五花八門(mén),造就了移動(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è)置某類(lèi)寬度為375px：