移动端h5开发如何做到和ui图纸一致的网页

1. 让 UI 给出明确的标注，各种色值、尺寸、粗细。当然，UI 很可能不干。
2. 完全一致是不可能的，因为移动端屏幕尺寸那么多，浏览器可视区域的尺寸也各不相同，而设计图就只画一张固定尺寸的图，怎么一致？许多 UI 根本不考虑适配的。而且我认为 PS 并不是最好的设计 webapp 的工具，原型工具才是，可以搜一下最近刚出的 invison studio。当然，许多 UI 被工具束缚，陷入路径依赖和舒适区，不愿意学习新工具，在这样的团队里，前端确实会难受一些。
3. 字体就没法一致，安卓和苹果根本没有微软雅黑...很多 UI 其实对移动端开发的相关知识并不关注，这个需要多沟通。
4. 1080px 宽的设计稿，这个确实不太符合通常的开发规范，你说设计稿上 200px 的宽度，你在 CSS 里该写多少 px？
5. 移动端适配两大利器：rem、flex，基本不存在兼容问题，可以放心用（flex 需要用 autoprefixer 补全）
6. 移动端适配头疼问题：1px 的细线怎么画。直接用 border: 1px solid #eee 这种肯定是会被 UI 怼的。参考方案：

.hair-top:before,
.hair-left:before,
.hair-bottom:after,
.hair-right:after {
  content: '';
  display: block;
  position: absolute;
  background-color: #ddd;
}
.hair-top:before {
  width: 100%; height: 1px;
  top: 0; left: 0;
  transform: scaleY(.5);
}
.hair-left:before {
  height: 100%; width: 1px;
  top: 0; left: 0;
  transform: scaleX(.5);
}
.hair-bottom:after {
  width: 100%; height: 1px;
  bottom: 0; left: 0;
  transform: scaleY(.5);
}
.hair-right:after {
  height: 100%; width: 1px;
  top: 0; right: 0;
  transform: scaleX(.5);
}

1. 不推荐淘宝 flexible 方案里动态设置 viewport 的做法。理由有三：

• 几乎所有长度单位都需要换算为 rem，很多时候都没必要
• 设置字体大小比较麻烦
• 第三方组件不一定采用这套适配方案，可能存在不兼容的情况