原生js缩放自适应【模仿小米页面】

原生js缩放自适应【模仿小米页面】

先看一下小米缩放自适应的页面：http://www.mi.com/redminote8pro

大致思路：

                                

效果示例：http://106.13.123.61/skrollr/test.html

一、搭建基本页面，如下代码所示：

二、为他们添加样式

重点是加上一个动画以便达到延时效果：transition-duration: 2s;如下代码所示：

  body{
            background-color: #000000;
            overflow-x: hidden;
            margin: 0 auto;
        }

        .vi{
            width: 900px;
            transition-duration: 2s;
            margin: 0 auto;
        }
        .vi video{
            display: table;
            width: 100%;
        }
        video{
            width: 100% ;
        }

三、js添加对应效果

如下代码所示：

3.1 定义全局变量，存储视窗宽度、高度和显示比例

3.2 获取所有的类

3.3 定义函数，执行效果

3.4 定义显示比例大小

3.5 判断宽高比例，适配每个屏幕大小

3.6 宽高*比例得到等比例缩放的宽高

四、完成

以上就是缩放自适应的一个大致思路，效果还有待修整。