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，以实现不同的比例分配效果。

总结

以上即为使用Flexible.js实现淘宝弹性布局的攻略。Flexible.js可以帮助我们动态地适配不同分辨率下的网页，而Flexbox布局则可以实现多列布局的效果。我们需要充分利用这些强大的工具来优化我们在不同设备上的显示效果，提升用户体验。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：js中flexible.js实现淘宝弹性布局方案 - Python技术站

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

什么是Flexible.js？

实现Flexible.js方式：

设计使用多列布局

总结

相关文章