组件根据浏览器大小缩放
npm install screen-resize
main.js
import screenResize from "screen-resize"; Vue.use(screenResize);
.vue
<screen-resize> <div>// ...需要屏幕缩放的内容</div> </screen-resize>
- 添加可配置参数 screenWidth、screenHeight 配置当前设计图或最佳适配屏幕的宽高, 默认为1920*1080
- 添加单元测试 当前组件未进行单元测试,在项目中使用存在一定风险
https://codesandbox.io/s/objective-hermann-1420kh?file=/src/App.vue
- 建议使用百分比搭配 flex 进行布局
- 将 最外层 的 margin 设为 0
- 目前仅支持Vue2
最外层 {
margin: 0;
height: 100vh;
width: 100vw;
}