移动Web-移动适配

两种移动适配方案：

                  rem ： 目前多数企业在用的解决方案

                  vw / vh：未来的解决方案

例子：

1 使用rem单位设置网页元素的尺寸 

        rem单位

                1.相对单位

                2.rem单位是相对于HTML标签的字号计算结果

                        2.1  确定设计稿对应的设备的HTML标签字号

                        查看设计稿宽度 → 确定参考设备宽度(视口宽度) → 确定基准根字号（1/10视口宽度）

                        2.2  rem单位的尺寸

                                N * 37.5 = 68 → N = 68 / 37.5

                                rem单位的尺寸 = px单位数值 / 基准根字号

                3.1rem = 1HTML字号大小

2 使用flexible

       flexible.js是手淘开发出的一个用来适配移动端的js框架。

                       核心原理就是根据不同的视口宽度给网页中html根节点设置不同的font-size。

        目标：使用flexible js配合rem实现在不同宽度的设备中，网页元素尺寸等比缩放效果

        思考：咱们检测了3个视口，分别设置了根字号，有什么弊端吗？

        答：手机设备多，屏幕尺寸不一，视口不仅仅有这3个

使用方式 ：

 

2使用vw / vh进行适配

        目标：能够使用vw单位设置网页元素的尺寸