html5移动端vw+rem页面适配详解、案例实践（flexible.js插件）

案例效果显示

rem布局适配的原理简单来说，就是根据屏幕的大小，动态的改变 html 标签的 font-size 的大小，以此就可以配合媒体查询微调做到不同屏幕的适配。

rem 一般都有一个标配机型：
大多数开发者调试页面，一般以两种标配机型为主要测试
（UI一般只会提供 750px 或者是 640px 的设计稿，这就要求我们通过一张设计稿能够适配所有的屏幕）
最常用的以iPhone6/7/8：750px （这里为谷歌浏览器）

现以相对较少iPhone5：640px

这里，可能会有疑惑，明明图上屏幕 iPhone6/7/8 上写的是375 * 667，为什么是适配 750px 的设计图，这需要了解 dpr

dpr：设备像素比例 dpr=物理像素/逻辑像素
物理像素：真正设备上所显示的像素，（用ps量的像素大小）
逻辑像素：css中设置的像素

怎么确定dpr（根据UI设计图）
设计图宽750px---->dpr取2 :750/2=375
设计图宽640px---->dpr取2 :640/2=320

rem：相对大小单位（主要用于屏幕适配布局，移动端比较广泛）
相对根元素的 html font-size 的大小，默认状态：1rem = 16px。
给html设置，font-size=？？px，
目的为了给rem确定比例，而一般为了方便计算，把html的font-size值设置100px，设置 100px，就是为方便计算，
但是一定注意 100px 并不会自己发生改变，
而我们怎么让 html 的 font-size 的值随着窗口的大小发生变化！！！

这里需要知道 vw （视口的占比，如width：100%即视口宽100%）

px 和 vw 之间，怎么确定换算关系：依赖设备（从设计图入手）

第一种情况：设计图宽度 750px

首考虑设备像素比例 dpr=2
计算 750px/2=375px（适配的核心设备iphone 6/7/8）
即设备视口宽度 375px
那么： 100vw = 375px
1vw = 3.75px
？vw = 100px---->即 100px/3.75px 约等于 26.67vw

所以设计图宽度 750px--------设置 font-size：26.67vw

第二种情况：设计图宽度 640px，算法相同，font-size:31.25vw。

如果使用 vw+rem 做页面布局适配 (牢记)
ui设计图
750px —> html{ font-size:26.67vw }
640px —> html{ font-size:31.25vw }
好吧，这里算法啥也不多说了，以上，想了解的可以看看，多概念，也可以略过，下面讲讲实际操作最简单的方法，（更方便、不需要计算）

使用flexible.js插件

flexible.js 是阿里团队开源的一个库，使用 flexible.js 可以搞定各种不同的移动端设备兼容自适应问题，根据宽度的不同设置不同的 font-size 大小，样式间距都使用rem 作为单位，不同屏幕大小适配不同的样式。

而不同的编辑器更体现了各自编辑器的强大，这里使用 Vsode 编辑器为例，在 vscod 商店中搜索 “px to rem” ，下载重启启用 （注意：上方讲其转100px方便计算，所以下载了 px to rem 插件后需要单独设置参数，选中插件 右击 -----> Extension Settings在用户下手动设置px-to-rem:Number of…设置为100），这样，比如 height：88px，会自动换算为 rem 值 0.88rem ( 不需要考虑rem单位换算 )，如果没有自动换算按 alt + z 快捷键，再配合使用 flexible.js 插件（不需要考虑页面html中font-size的大小适配），完成 vw + rem 页面适配更加高效方便。

flexible.js插件引用操作

1. 下载 flexible.js，下载连接（免费），下载后直接放在自己的项目中的 js 文件下
2. 在html文件中引入 flexible.js

<script  src="./js/flexible.js（js的路径）"></script> 

3. 去掉 meta 标签，也不需要 html 中加入 font-size：26.67vw等，插件都会自动帮助补齐，
4. 直接应用即可。
   

案例

直接上手案例：效果图

这里主要讲述结构框架布局和其css样式，无 javascript 交互。

头部区域

1、头部 搜索部分：搜索框，其实html5中绝大多数的搜索框都是一个 div，点击跳转到对应搜索页面，进行相应的关键字搜索操作。左右两边的图标为阿里矢量图标库中的素材代码。

html文件：

<!-- header -->
    <header>
    	//左侧的图标
        <p><i class="iconfont icon-luyin13"></i></p>
        //中间区域的搜索框
        <div class="search">
            <i class="iconfont icon-fangdajing"></i>
            <span>搜索音乐、歌词、电台</