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>
Rem转换
这里使用的vsCode开发工具，安装插件cssrem插件，这里以iPhone6为例，打开浏览器可以看到data-dpr为2和font-size为75px，所以这里设置Root Font Size为75即可，这样输入20px就会及时自动转换了。subline也有相应的转换插件。<br />
image.png
