实现屏幕自适应的方式有很多种,可以通过插件本身提供的方法,可以通过flex布局等,今天我们来写写通过js实现屏幕自适应。
以下是在vue中实现的屏幕自适应
- 首先在data中定义一下屏幕的默认大小和缩放比例
- 然后在mounted中获取窗口的内置宽高,并计算缩放比例
- 监听事件,当screen发生变化时,重新计算缩放比例
- 给最外层的div设置transform 属性,不要忘记要给固定宽高样式,app.vue中也要给固定宽高
-
在utils中新建一个rem.js文件,获取最外层的fontSize,并按比例计算
-
在main.js中引入
至此,便完成了屏幕的自适应。