前言
看了宇哥关于移动端适配的分享后，加上目前公司项目也需要做移动端适配，今天就抽空搞了搞。目前业界还是比较推崇手淘使用“rem+viewport”的解决方案，今天自己模仿手淘flexible的解决方案，实现了个简单的demo。
一句话总结
flexible动态获取设备宽度和dpr，为html元素添加两个属性：data-fontsize（设备宽度／10），data-dpr（安卓均为1，ios不同设备为2或3），同时设置meta标签的scale（1/dpr）。你只需要为需要适配的元素设置rem，为字体设置px（需要考虑不同的dpr）。
小demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="yes" name="apple-touch-fullscreen">
<meta content="telephone=no,email=no" name="format-detection">
<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
<link rel="apple-touch-icon" href="favicon.png">
<link rel="Shortcut Icon" href="favicon.png" type="image/x-icon">
<title>再来一波</title>
<style type="text/css">
.item-section{
10rem;
margin: 0 auto;
}
img{
10rem;
}
[data-dpr="1"] .flag-title a{
font-size: 14px;
}
[data-dpr="2"] .flag-title a{
font-size: 28px;
}
[data-dpr="3"] .flag-title a{
font-size: 42px;
}
</style>
</head>
<body>
<div class="item-section" data-repeat="sections">
<ul>
<li data-repeat="items" class="flag" role="link" href="##">
<a class="figure flag-item" href="##">
<img src="https://placeimg.com/350/350/people/grayscale" alt="">
</a>
<div class="figcaption flag-item">
<div class="flag-title"><a href="##" title="">Carter's1年式灰色长袖连体衣包脚爬服全棉鲸鱼男婴儿童装</a></div>
</div>
</li>
</ul>
</div>
</body>
</html>