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

Question

移动端开发中，碰到一个很严格的ui，拿我的网页和设计图纸一一比对，如下：

所以想用那种rem来做，1rem=100px；对应1080的设计图纸；后面根据不同的分辨率改变1rem的值；这样就要页面中所有的宽高、字体大小都需要以rem为单位了，这样浏览器就会要一直的计算宽高大小，会影响到性能吗？
希望大家支支招有没有更好的办法把网页做成和设计图纸的一样呢（我是个新手），谢谢了！

Answer 1

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，很多时候都没必要
• 设置字体大小比较麻烦
• 第三方组件不一定采用这套适配方案，可能存在不兼容的情况

Answer 2

rem并不会一直计算高宽大小，一般来说只需要进入页面时计算一次，除非进行了缩放拉伸等操作，不过移动端一般是禁止缩放的，就算拉伸也不会影响到宽度，所以不需要担心这方面的性能问题。
用rem的话一般就是完全取代px，除了在很细微的地方，例如边框圆角之类以外。

Answer 3

我们这边的UI也是1080px的

于是我们在resetCss里面加了一串这样的css多媒体查询

@media only screen and (min-width:319px) and (max-width:359px){body{font-size:95%}}
@media only screen and (min-width:481px) and (max-width:600px){body{font-size:120%}}
@media only screen and (min-width:601px){body{font-size:150%}}
@media only screen and (min-width:640px){body{font-size:180%}}

相对于设计稿，手机屏幕大概是三倍大小，我用得是em单位，一般/48。改变font-size影响相关padding、margin大小时再去做其他计算

Answer 4

= =||还是要沟通清楚：
1、1080的设计，手机设计稿不一般不是1080。。（一般会以i6的2倍图去设计，我遇到的UI）
所以和UI沟通要以什么标准去制作页面？
2、不同尺寸下要不要根据屏幕进行调整。。有些人还真的不喜欢调整。。字就是要那么大。。

页面使用rem完全没问题的。。不需要兼容低版本的 还有 vm 布局之类的。。
一些需要改变的可以用px，混合使用。。

Answer 5

使用rem不会影响到性能的。。只是一开始设置html的字体大小而已。

Answer 6

rem不会影响性能。
完全可以用的，在移动端。

Answer 7

用rem不会有什么大问题，毕竟它的出现就是为了解决移动端的适配问题的。

有些细节需要注意：
1.尽量避免用rem来设置字体，某些设备中，对font-size的小数解析存在怪异问题。

2.一般移动端的设计稿，会定750px的宽度，以此来做对应比较好。