写Vue项目 简单初步移动适配

移动适配

1. 在index.html中 设置根元素字体大小和监听屏幕大小的改变

<script>
// 设置根元素字体大小
document.documentElement.style.fontSize = document.documentElement.clientWidth/10+'px';

//监听屏幕大小的改变
window.addEventListener('resize',()=>{
	document.documentElement.style.fontSize = document.documentElement.clientWidth/10+'px';
});
</script>

2. 设计分辨率对应的根字体尺寸,这里用less举例

@remSize:37.5;

// 对样式的封装
.w(@px){
	width:unit(@px/@remSize,rem)	// 第二个参数是单位
}

3. 封装一个通用样式css文件
   reset.css

*{margin:0;padding:0}

4. 在main.js引入

import './style/reset.css'

5. 在.vue文件中引入less文件

<style lang="less" scoped>
	@import '../../style/index.less'
</style>