js中flexible.js实现淘宝弹性布局方案

下面我将详细讲解一下在JS中使用flexible.js实现淘宝弹性布局方案的完整攻略。

什么是Flexible.js？

Flexible.js是在移动设备上适配不同屏幕大小的一种方案，其基本思想就是根据不同设备的屏幕大小和像素密度，动态地调整网页的字体大小、根节点的大小、viewport的大小等，以实现在不同尺寸的设备上显示效果一致的效果。

实现Flexible.js方式：

1. 安装flexible.js库

<script src="https://cdn.bootcss.com/flexible.js/0.3.2/flexible.js"></script>

只需在head区域引入flexible.js文件即可。

<head>
     <script src="https://cdn.bootcss.com/flexible.js/0.3.2/flexible.js"></script>
</head>

2. 设置viewport

移动端不同屏幕显示效果一致的关键就在于viewport的设置。首先，设置标签中viewport的width属性为device-width, 并启用initial-scale=1属性来禁用用户缩放:

<head>
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
     <script src="https://cdn.bootcss.com/flexible.js/0.3.2/flexible.js"></script>
</head>

设计使用多列布局

如果网页的设计使用多列布局，那么flexible.js可以较好地配合CSS3的Flexbox模型来实现。下面给出一个具体的例子。

首先，定义一个根据不同分辨率而变化的$rem数值，以及根据该$rem数值实现区块元素居中布局的样式：

/* 移动端视觉适配 */
html {
  font-size: calc(100vw / 3.75);
}
@media screen and (min-width: 320px) {
  html {
    font-size: 85.333vw;
  }
}
@media screen and (min-width: 375px) {
  html {
    font-size: 100vw;
  }
}
@media screen and (min-width: 414px) {
  html {
    font-size: 110.4vw;
  }
}
@media screen and (min-width: 768px) {
  html {
    font-size: 153.6vw;
  }
}

在上述布局中，通过媒体查询来确定不同类型的屏幕所适配的$rem数值。当网页根元素设定了字体大小以后，使用flexible.js可以在CSS中非常方便地使用rem，其可以根据页面根元素设置的字体大小动态地计算所需的像素数目。

接下来，实现CSS3的Flexbox布局来构建一个多列布局。需要注意的是：

在每个容器内部设置display:flex供其作为flex容器使用。
如果子元素按某种比例排列，则需要在容器中指定flex-grow和flex-basis属性。其中， flex-grow属性用来确定当空间剩余时子元素如何分配空间，而flex-basis属性则是用来确定子元素在屏幕上所占据的空间大小。

示例代码如下：

<div class="outer">
  <div class="item" style="flex:1;">item1</div>
  <div class="item" style="flex:2;">item2</div>
  <div class="item" style="flex:3;">item3</div>
</div>

/*外层字体大小flexible.js会处理为em大小*/
.outer {
  display: flex;
  font-size: 1rem;
  background-color: #eee;
  width: 100%;
  margin: 0 auto;
}
.item {
  padding: 1em;
  margin: 1em;
  background-color: #fff;
  border: 1px solid #ccc;
  color: #222;
  font-size: .8rem; /*使用rem来表示字体大小*/
  flex-grow: 1; /*设定子元素在空间充裕时的默认弹性值*/
  flex-basis: 0; /*设定子元素所占据的空间大小*/
}
.item:first-child {
  background-color: #f8f8f8;
}
.item:last-child {
  background-color: #f0f0f0;
}

上述代码中，使用了字体大小等基本样式来定义一个包括多个子容器的外部容器。在内部，子元素的flex-basis属性值分别设定为1、2和3，以实现不同的比例分配效果。