数据大屏适配方案 （scale）

目录

适配方案分析

vw vh

什么是vw和vh

vw和百分比的区别是什么？

vw怎么使用

实现思路

案例

 scale方案

一、scale()方法

1、scaleX(x)

2、scaleY(y)

3、scale(x,y)

案例

---

• 大屏之关键-前期的自适应适配

• 根据 ui 稿绘制图表，调细节

而解决了适配问题后，后面就只是一个慢工出细活，耗时间的事情了。

适配方案分析

看了网上的各种方案，目前大家采用的大概有 3 种

方案	实现方式	优点	缺点
vm vh	1.按照设计稿的尺寸，将px按比例计算转为vw和vh	1.可以动态计算图表的宽高，字体等，灵活性较高 2.当屏幕比例跟 ui 稿不一致时，不会出现两边留白情况	1.每个图表都需要单独做字体、间距、位移的适配，比较麻烦
scale	1.通过 scale 属性，根据屏幕大小，对图表进行整体的等比缩放	1.代码量少，适配简单 2.一次处理后不需要在各个图表中再去单独适配	1.因为是根据 ui 稿等比缩放，当大屏跟 ui 稿的比例不一样时，会出现周边留白情况  2.当缩放比例过大时候，字体会有一点点模糊，就一点点  3.当缩放比例过大时候，事件热区会偏移。

vw vh

什么是vw和vh

- vw和vh他们是一个相对单位（类似em和rem）

vw是：viewport width 视口宽度单位
vh是： viewport height 视口高度单位

- 相对视口的尺寸计算

1vw=1/100视口宽度
1vh=1/100视口高度
eg:当前屏幕视口是375像素，1vw就是3.75像素

vw和百分比的区别是什么？

百分比是相对父元素来说的
vw和vh是相对于当前视口来说的

vw怎么使用

如何还原设计稿？
前提：我们设计稿按照iphone678来设计，有个盒子是50*50像素的，如何使用vw呢？
分析：

②那么1vw是多少像素呢
375/100=3.75px
③我们的目标是做少像素？
50 50
④ 那么，50是多少个vw?
50/3.75=13.33vw
 

实现思路

按照设计稿的尺寸，将px按比例计算转为vw和vh，转换公式如下

假设设计稿尺寸为 1920*1080（做之前一定问清楚 ui 设计稿的尺寸）
 
即：
网页宽度=1920px
网页高度=1080px
 
我们都知道
网页宽度=100vw
网页宽度=100vh
 
所以，在 1920px*1080px 的屏幕分辨率下
 
1920px = 100vw
 
1080px = 100vh
 
这样一来，以一个宽 100px 和 100px 的 div 来说，其所占的宽高，以 vw 和 vh 为单位，计算方式如下:
 
vwDiv = 100 / (1920 / 100vw)
vhDiv = 100 / (1080 / 100vh)
 
所以，就在 1920*1080 的屏幕分辨率下，计算出了单个 div 的宽高
 
当屏幕放大或者缩小时，div 还是以 vw 和 vh 作为宽高的，就会自动适应不同分辨率的屏幕
 

案例

    
    
    
    
    



    

        
数据大屏幕
        
hahaha 
    

 scale方案

我们整个大屏的尺寸设置和设计图一样，只是通过css的scale放大缩小属性，来控制实际展示的大小。

通过监听浏览器窗口的大小，来改变scale的比例，从而实现数据大屏适配。（百度、网易等大数据适配的解决方案均是这个）

一、scale()方法

缩放，指的是“缩小”和“放大”。在CSS3中，我们可以使用scale()方法来将元素根据中心原点进行缩放。

跟translate()方法一样，缩放scale()方法也有3种情况：

（1）scaleX(x)：元素仅水平方向缩放（X轴缩放）；

（2）scaleY(y)：元素仅垂直方向缩放（Y轴缩放）；

（3）scale(x,y)：元素水平方向和垂直方向同时缩放（X轴和Y轴同时缩放）；

1、scaleX(x)

语法：transform:scaleX(x)

说明：x表示元素沿着水平方向（X轴）缩放的倍数，如果大于1就代表放大；如果小于1就代表缩小。 大家想想倍数是怎样一个概念就很好理解了。

2、scaleY(y)

语法： transform:scaleY(y)

说明： y表示元素沿着垂直方向（Y轴）缩放的倍数，如果大于1就代表放大；如果小于1就代表缩小。

3、scale(x,y)

语法：transform:scale(x,y)

说明：x表示元素沿着水平方向（X轴）缩放的倍数，y表示元素沿着垂直方向（Y轴）缩放的倍数。

注意，Y是一个可选参数，如果没有设置Y值，则表示X、Y两个方向的缩放倍数是一样的（同时放大相同倍数）。

案例

    
    
    
    
    



    

        
        

            
我是祖国的
            
老花骨朵