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

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

图片描述

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

阅读 2.9k
评论
    7 个回答
    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,很多时候都没必要
    • 设置字体大小比较麻烦
    • 第三方组件不一定采用这套适配方案,可能存在不兼容的情况
      相似问题
      推荐文章