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

案例效果显示

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> 
1

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>搜索音乐、歌词、电台</span>
        </div>
        //右侧的图标
        <p><i class="iconfont icon-luyin"></i></p>
    </header>
1
2
3
4
5
6
7
8
9
10
11
12

css样式：

/* header */
header{
    width: 100%;
    height: 0.88rem;/*ps中量取高度为88px，因为安装‘px  to  rem’插件，自动转换为rem值，一定需要注意  px to rem  插件中的手动配置 px-to-rem:Number of....设置为100*/
    background-color: #d43b33;
    padding: 0.14rem 0;/*因为在重置样式中设置了box-sizing: border-box;怪异盒子,所以padding都不需要减*/
    position: absolute;/*头部的搜索部分，一定要设置定位，可以是固定定位也可以是相对定位*/
    top: 0;
    display: flex;/*触发弹性盒*/
}
header p{
    width: 1.08rem;
    text-align: center;
}
/*图标*/
header .iconfont{
    font-size: 48px;
    color: #fff;
}
header .search{
    width: 5.34rem;
    height: 0.6rem;
    background-color:#fff;
    color: #d2d2d2;
    text-align: center;
    border-radius: 0.1rem;/*圆角*/
    display: flex;/*触发弹性盒面  如对其弹性盒属性不了解，查看上篇博文(https://blog.csdn.net/weixin_43513126/article/details/104699370)*/
    justify-content: center;/*弹性盒子  主轴对齐方式*/
    align-items: center;/*侧轴对齐方式*/
}
/*搜索框中的图标样式不同，单独设置，*/
header .search .icon-fangdajing{
    font-size: 26px;
    color: #d2d2d2;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

头部搜索下方的导航区

2、搜索下方的导航区：

html文件：

 <!-- nav -->
    <nav>
        <li >个性推荐</li>
        <li>歌单</li>
        <li class="nav_xz">主播电台</li>
        <li>排行榜</li>
    </nav>
1
2
3
4
5
6
7

css样式：

/* nav */
nav{
    width: 100%;
    height: 0.8rem;
    background-color: #fff;
    position: absolute;
    top:0.88rem;/*注意，此时定位的位置是在搜索区域的下方，所以要在上方距离搜索区域的高度*/
    font-size: 28px;
    border-bottom: 1px solid #d2d2d2;
    padding:0 0.24rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
nav li{
    height: 0.8rem;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 0.1rem;
}
nav .nav_xz{
    color: #d43b33;
    border-bottom: 4px solid #d43b33;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

底部导航区

3、底部导航区，固定定位部分先设置

hmtl文件：

<!-- footer -->
    <footer>
        <figure>
            <p><i class="iconfont icon-46112"></i></p>
            <figcaption>发现音乐</figcaption>
        </figure>
        <figure class="foote_xz">
            <p><i class="iconfont icon-Shape"></i></p>
            <figcaption>我的音乐</figcaption>
        </figure>
        <figure>
            <p><i class="iconfont icon-ren3"></i></p>
            <figcaption>朋友</figcaption>
        </figure>
        <figure>
            <p><i class="iconfont icon-ren11"></i></p>
            <figcaption>帐号</figcaption>
        </figure>
    </footer>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

css样式：

/* footer */
footer{
    width: 100%;
    height: 0.98rem;
    background-color:#232729;
    position: absolute;
    bottom: 0;//定位在最下方
    display: flex;
    justify-content: space-around;
}
footer figure{
    height: 0.98rem;
    color:#a89f9c;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content:center;
    align-items: center;
}
footer figcaption{
    font-size: 18px;
    padding-top: 0.1rem;
}
footer .iconfont{
    font-size: 42px;
}
footer figure:nth-of-type(1){
    color: #fff;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

中间主体部分

4、中间主体部分：因为中间部分内容是不固定的，内容多出需要能上下滚动，故高宽100%，<main>利用padding把中间主体部分挤在正中间，<section>中间内容显示区（必须嵌套一个内容元素），再为<section>加滚动条averflow-y:auto，最后<div>标签中才放显示所有的内容。

html文件：

/* main */
<main>
	<section>
		<div class="show">
			<h1>这里才放内容</h1> /*多放几个看效果*/
		</div>
	</section>
</mian>
1
2
3
4
5
6
7
8

css样式：

/* main */
main{
    width: 100%;
    height: 100%;
    padding: 1.68rem 0 0.98rem 0;
}
main section{
	width: 100%;
    height: 100%;
    overflow-y: auto;//滚动条
}
.show h1{
    font-size: 50px;
    line-height: 1rem;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

案例中其他知识点

html5语义化标签

使用语义化标签可以主开发人员了解每部分区域的功能，移动端非常实用。

section：类似于div、section更偏向于划分区域。
article：更偏向于内容的展示。
aside：在一边的、侧边的，（适用于左右布局、两栏布局等等）
header：表示内容的头部、网页的头部、头部区域。
footer：表示内容的底部、网页的底部、底部区域。
nav：导航、连接区域。
figure：表示一块独立的内容，上下左右自带margin值。
figcaption：表示figure的标题，一般放在figure的第一位或最后一位。
main：主体内容（IE不兼容）
hgroup：标题的一个分组。
mark：高亮显示，默认底色为黄色（可以更改背景、内联元素） time：放时间的。
dialog：类似于微信的对话框（默认display：none，默认边框，默认定位）
更多语义化标签，根据需求，自行了解。

图标导入

阿里矢量图标库，都是免费并且开源的，
使用方法：在阿里矢量图标库中，对应需要的图标逐个 “ 添加入库 ” ,再点开在其右上角的类似购物车的图标，查看所需要的图标无误后，点击 “ 下载代码 ”。

下载完成，有一个压缩包，解压放入自己的项目中，

在所需要引入的 html 文件中，使用 link 标签导入解压后的文件夹中的 iconfont.css 文件，

<link rel="stylesheet" href="./font_8ugijzvlg8f/iconfont.css">
1

打开文件夹中的 html 文件，可查看对应的的图标的名称，每一人图标当作一个小字体，习惯把每一个图标放 i 标签中，首先给 i 标签起 class 名 iconfont，iconfont这个名字在iconfont.css中是已经定义好的，如果要改，改的地方比较多，不建议修改。

在需要使用图标的地方，直接

<i class="iconfont 图标名称"></i>
1

需要注意图标名称为 Font class下的名字。

上述为移动端 vw + rem 布局所完成结构、样式的总体内容，掌握插件的使用后，对单位的简单了解，移动端 vw + rem 布局更加轻松掌握。