javascript - 移动 web 开发，基于 iPhone 6 的 PSD 设计稿如何还原成多终端友好的网页？

Question

1. 标注图 (分辨率 750* 1334）中字体，间距单位是 px ,基于物理像素

2. 如何兼容低分辨率的 iPhone 5 和 iPhone 4，以及众多 android 设备

补充：最终使用了天猫的 lib-flexible 方案

Answer 1

使用Flexible实现手淘H5页面的终端适配

Answer 2

重构页面时候用rem

Answer 3

大概是这个意思。

(function (window) {
  var dpr, rem, scale, timeout;
  var docEl = document.documentElement;
  var metaEl = document.querySelector('meta[name="viewport"]');
  dpr = window.devicePixelRatio || 1;
  rem = docEl.clientWidth * 2 / 10;
  scale = 1 / dpr;
  // 设置viewport，进行缩放，达到高清效果
  metaEl.setAttribute('content', 'width=' + dpr * docEl.clientWidth + ',initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale + ',user-scalable=no');
  // 设置data-dpr属性，留作的css hack之用
  docEl.setAttribute('data-dpr', dpr);
  // 动态写入样式
  docEl.style.fontSize = rem + "px";
  //  docEl.firstElementChild.appendChild(fontEl);
  //  fontEl.innerHTML = 'html{font-size:' + rem + 'px!important;}';
  // 给js调用的，某一dpr下rem和px之间的转换函数
  //rem转px
  window.rem2px = function (v) {
    v = parseFloat(v);
    return v * rem;
  };
  //px转rem
  window.px2rem = function (v) {
    v = parseFloat(v);
    return v / rem;
  };
  window.dpr = dpr;
  window.rem = rem;
})(window)
console.log(window.rem2px(75) )

Answer 4

你可以看看这个~就是你要的！
从网易与淘宝的font-size思考前端设计稿与工作流

Answer 5

小司项目里使用rem值,通过对js计算设备的宽度值来设定一个比例.css用的rem值会根据这个比例来缩放,当然难免会有一点误差在的。