vue项目移动端适配(flexible.js)

想要达到页面的自适应通过rem+淘宝的flexible.js

第一步(cmd)

输入命令

npm install lib-flexible --save

第二步(在main.js中引入lib-filexible)

import 'lib-flexible/flexible.js'

第三步(在项目根目录注释掉如下标签)

<meta name="viewport" content="width=device-width, initial-scale=1.0">

因为安装flexible会自动生成meta-viewport标签,不注释掉不生效

第四步(在项目中css样式须要使用rem为单位)

(我用的是vscode)不会安装插件的请点击:vscode-cssrem

第五步(下边是设计稿为750时的情况)

当你在样式中写上10rem时发现浏览器显示并不是750px
解决办法
在app.vue中的style中写入如下样式:

@media screen and (min-width:750px) {
	html {
		font-size: 75px !important;
		/* !important 是为了提升权重,因为flexb.js比index.css权重大 */
	}
}

body {
	/* 设计稿是750px  js划分了10等份 75px==1rem*/
	width: 10rem;
	min-width: 320px;
	max-width: 750px;
	margin: 0 auto;
	font-family: Arial, Helvetica, sans-serif;
	line-height: 1.5;
}

这样就可以开始写样式了===================================

©️2020 CSDN 皮肤主题: 创作都市 设计师:CSDN官方博客 返回首页