前端可视化大屏适配解决方案

 

一、 使用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. 如果实在不确定的话，个人建议使用上述第一种，直接设置宽高占满整屏，这种方式                      有时也会解决很多不必要的麻烦