H5移动端适配 Flexible方案

H5移动端适配 Flexible方案是目前比较流行的一种移动端适配方案，以下是完整攻略：

一、什么是Flexible方案

Flexible方案是一种基于JavaScript的解决方案，它利用了浏览器的缩放特性，在页面加载的时候动态改变HTML文档的font-size属性，从而实现页面的自适应调整。

二、Flexible方案的具体实现

1. 创建一个基准值变量并计算出结果

首先，在head标签中添加如下代码，用于设置HTML文档的初始font-size值：

```html

```

然后，在body标签最后添加如下JavaScript代码，用于计算并设置HTML文档的font-size值：

javascript
const width = document.documentElement.clientWidth;
const fontValue = width / 7.5; // 基准值为7.5，可自行设置
document.documentElement.style.fontSize = fontValue + 'px';

1. 使用rem单位进行布局

在CSS中，我们以rem单位进行布局，而rem的大小是相对于HTML文档的font-size值来计算的。例如，我们需要设置一个宽度为200px的div，我们可以这样写：

css
div{
width: 2rem; /* 这里的2rem的大小是200px/100px */
}

三、Flexible方案的示例说明

下面通过两个示例来说明Flexible方案的具体应用。

示例一

假设我们需要在移动端使用一个flex布局的页面，其中包含了一个宽度为500px的图片。我们可以按照如下步骤进行适配：

1. 使用flex布局

```html

item1

item2

```

css
.container{
display: flex;
flex-wrap: wrap;
}
.item{
width: 50%;
height: 100px;
border: 1px solid #000;
box-sizing: border-box;
}
.img-container{
width: 100%;
text-align: center;
}
img{
max-width: 100%;
height: auto;
}

1. 使用Flexible适配

在head标签中添加Flexible方案的实现代码：

```html

```

然后，我们可以根据图像的原始尺寸设置宽度。假设图像的原始尺寸为1000x500像素，则可以设置如下样式：

css
.img-container{
width: 6.67rem; /* 500px / 75px */
}
img{
max-width: 100%;
height: auto;
}

示例二

假设我们需要在移动端使用一个swiper轮播图，其中每个slide的宽度为300px，高度为150px。我们可以按照如下步骤进行适配：

1. 使用swiper插件

在html中引入swiper插件的css和js文件。

1. 使用Flexible适配

在head标签中添加Flexible方案的实现代码：

```html

```

然后，我们可以根据swiper的初始容器宽度设置每个slide的宽度。假设swiper初始宽度为960px，则可以设置如下样式：

css
.swiper-container{
width: 12.8rem; /* 960px / 75px */
}
.swiper-slide{
width: 4rem; /* 300px / 75px */
height: 2rem; /* 150px / 75px */
}