H5手淘方案适配移动端
2019-07-23 本文已影响0人
cs0710
H5移动适配方案网上有很多,但是最好用的还是淘宝开源的Flexible库+Rem解决方案,这里暂且不说适配方案的思想和原理,这里仅作H5页面开发时的使用说明。以iPhone6设计稿为例,可以看到设计师标注的尺寸等。这些尺寸我们就可以以1:1的比例直接使用。
Flexible引入
// 可以看到meta[name='viewport']标签被注释掉了,这是因为它强制设置scale为1,font-size比例也会进行缩小,和设计稿上的尺寸有出入,加大前端计算量
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<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">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
<title>Document</title>
<style>
body {
margin: .266667rem; // '20px'
}
</style>
</head>
<body>
我在测试手淘方案
</body>
</html>