Flexible实现H5移动端适配小demo

前言

看了宇哥关于移动端适配的分享后，加上目前公司项目也需要做移动端适配，今天就抽空搞了搞。目前业界还是比较推崇手淘使用“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{
				width: 10rem;
				margin: 0 auto;
			}
			img{
				width: 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>
posted @ 2017-08-25 20:35  呆呆流云  阅读(745)  评论(0)  编辑  收藏  举报