一、 使用flexble.js
1. 高度，宽度都设置为100%
2. vue在main方法中导入flexble.js文件，写样式的时候直接使用postcss转换rem值
3. 这样会导致一个问题，在与设计稿不同的比例的屏幕上，大屏项目也不会按比例显示
4. 这样的好处是，不管大屏比例怎么变化，宽高总是占满整屏，有失也有得
二、动态计算设备宽高比例 + flexble.js
1. 动态计算设备的宽度，然后计算设计稿的比例，根据比例和宽度动态计算设备的高度，然 后将高度指定为布局容器的高度
2. 动态计算设备的高度，也同上……
3. 布局容器高度出来了，里面的元素还是按照flexble.js的方式去实现响应式
4. 这样的好处是不管你的设备比例如何变化，项目永远是按照设计稿的比例进行缩放的
5. 这样也会导致一个问题，就是宽度或者高度变窄，会出现空白的区域
1. 解决方案：可以在布局容器外边加一个盒子，然后设置背景图片沾满整个屏幕，这样 会对空白区域有所改善
总结：
1. 不过还是建议开发前了解一下需要满足在什么样的设备上进行展示，然后进行针对性 开发
2. 如果实在不确定的话，个人建议使用上述第一种，直接设置宽高占满整屏，这种方式 有时也会解决很多不必要的麻烦