视觉稿与H5页面之间的终端适配
移动端页面开发
备注：该篇文章使用宽为750px（iPhone6的设备像素）的视觉稿
编写html代码：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
</head>
<body>
<div class="box"></div>
</body>
</html>
在css文件中写入样式：
*{
margin: 0;
padding: 0;
}
html,body{
width:100%;
overflow:hidden;
}
在head标签内写入meta视口标签
<meta name="viewport" content="width=device-width, initial-scale=1.0 ">
转换视觉稿中的尺寸大小：
方式1:
通过js来得到1rem的值（rem: 相对尺寸单位，相对于html标签字体大小的单位）
<script>
var scale = 1 / window.devicePixelRatio;
document.querySelector('meta[name="viewport"]').setAttribute('content','width=device-width,initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';
</script>
这样的设置有时候计算起来不方便，所以我们有时候就希望1rem=100px，这样在转换的时候就轻松很多。
方式2:
使用淘宝开源的代码：lib-flexible
<script type="text/javascript" src="./resource/js/flexible.js"></script>
这个js会在html标签上加入两个属性：data-dpr与font-size。
自动检测设备，你可以直接通过视觉稿去换算rem值，比如750/10=75px后面所有的都可以通过这个计算的到。
例如：视觉稿内：margin-left:15px，那么在开发中转换成rem：15/75=0.2rem，可以写成：margin-left:0.2rem
在字体上，不建议使用rem处理，可以使用如下方式处理：
@media screen and (max-width: 321px) {
body {
font-size:16px
}
}
@media screen and (min-width: 321px) and (max-width:400px) {
body {
font-size:17px
}
}
@media screen and (min-width: 400px) {
body {
font-size:19px
}
}
或者：
div {
width: 1rem;
height: 0.4rem;
font-size: 12px; // 默认写上dpr为1的fontSize
}
[data-dpr="2"] div {
font-size: 24px;
}
[data-dpr="3"] div {
font-size: 36px;
}
这样就可以在移动端实现你手中的视觉稿了。
以上知识参考了一些网址，详细情况可以访问以下链接：
1、http://hcysun.me/2015/10/19/%E4%B8%80%E7%AF%87%E7%9C%9F%E6%AD%A3%E6%95%99%E4%BC%9A%E4%BD%A0%E5%BC%80%E5%8F%91%E7%A7%BB%E5%8A%A8%E7%AB%AF%E9%A1%B5%E9%9D%A2%E7%9A%84%E6%96%87%E7%AB%A0-%E4%BA%8C/
2、https://github.com/hex-ci/lib-flexible
以上只能解决部分问题，还有一些问题没有办法处理，比如 高清图、表情图、1像素之类的，后续有时间补充。
大家看了以后觉得不对的，也请积极留言，作为小白，请大家多多关照。
