vue移动端适配方案

最新推荐文章于 2024-06-25 02:49:37 发布

cmmboy1990

最新推荐文章于 2024-06-25 02:49:37 发布

阅读量711

点赞数 1

分类专栏： vue常见问题文章标签： uni-app vue.js npm

本文链接：https://blog.csdn.net/cmmboy1990/article/details/121510944

版权

vue常见问题专栏收录该内容

35 篇文章 3 订阅

订阅专栏

1.nmp引入

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

2.在main.js导入amfe-flexible

import 'amfe-flexible';

3.在vue.config.js配置如下：

module.exports = {

	css: {
		loaderOptions: {
			postcss: {
				plugins: [
					require('postcss-pxtorem')({
						rootValue: 75,//若设计稿宽度为750px;则是75,除以10得到；
						propList: ['*']
					})
				]
			}
		}
	},
}
4.测试html

```html
<div class="title">{{ msg }}</div>
.title{
	width: 750px;
	height: 128px;
	background-color: aqua;
	font-size: 16px;
}

5.npm run serve 启动项目

在这里插入图片描述
观察font-size值在不同屏幕下的变化则成功引入;

6.注意：a.内联样式的css样式不适应。
b.若项目启动报错：PostCSS plugin postcss-pxtorem requires PostCSS 8.
解决：在package.json中将postcss-pxtorem版本改为5.1.1；即 “postcss-pxtorem”: “^5.1.1”