使用flexible完成H5终端适配

昨天做了一个H5的分享页，由于页面本身需求不大所以没有考虑bootstrap，而是采用了淘宝的flexible方案。

使用方法

在页面顶部引入依赖库：

<script src="http://g.tbcdn.cn/mtb/lib-flexible/{{version}}/??flexible_css.js,flexible.js"></script>

注意要在所有资源加载之前执行这个js，之后页面的元素，都可以用rem来设置，而html上的font-size就是rem的基准像素。

设计图中的px转换成rem

元素的尺寸换算，只需要原始px值除以rem基准值。

字体不建议使用rem

字体仍然使用px为单位。如果项目中有标题之类的，可以使用rem。

其他问题

关于文本和图片的居中
html:

<a href="" class="open_btn">
  <h2>打开映社，发现更多精彩</h2>
  <img src="images/open.png" alt="">
</a>

css:

.open_btn{
  display: block;
  color: #FFF;
  background-color: #393a3a;
  height: 1.26rem;
  font-size: 0.41rem;
  margin: 0.3rem 0.37rem 2.06rem 0.37rem;
  border-radius: 0.11rem;
  text-align: center;
  line-height: 1.26rem;
}
.open_btn h2{
  line-height: 1.26rem;
  display: inline-block;
  vertical-align: middle;
}
.open_btn img{
  width: 0.44rem;
  height: 0.44rem;
  vertical-align: middle;
}