设计稿多端适配方案

如何让不同尺寸的屏幕能以正常比例呈现设计稿？

动态修改 font-size + rem 方案

• 动态修改 html 标签 font-size，样式单位统一用 rem，数值为设计稿尺寸除以 base

  var fn = function () {
    var designWidth = 1920; // 设计稿尺寸
    var base = 16; // 1rem 的占比，不要小于 12
    var html = document.getElementsByTagName('html')[0];
    var clientWidth = document.body.clientWidth || document.documentElement.clientWidth;
    html.style.fontSize = (clientWidth / designWidth) * base + 'px';
  };
  
  document.addEventListener('DOMContentLoaded', function () {
    fn();
  });
  
  window.onresize = function () {
    fn();
  };
  

弊端

• 和根元素 font-size 值强耦合，系统字体放大或缩小时，会导致布局错乱
• html 文件头部需插入一段 js 代码
• 相较之下，vw 单位兼容性比 rem 稍差，ios8、安卓 4.4 及以上才完全支持。这也是为什么之前 rem 布局一直更流行的原因。目前 ios8、安卓 4.4 以下的用户已经非常少了，caniuse 上面显示，在中国这部分用户只有 1.2%，比例已经非常低了

设计稿 px 转 vw 方案（推荐）

• 1vw 表示屏幕宽度的 1%
• 把所有需要适配屏幕大小等比缩放的元素都使用 vw 做为单位。不需要缩放的元素使用 px 做单位
• 举个例子。设计师交付的设计稿宽度是 750px，设计稿上一个标题的 fontSize 标注尺寸是 32px。(32/750)*100% = 4.27% ，换句话说这个标题的字号占屏幕宽度的占比是 4.27%，不管任何屏幕都是如此。4.27% 即 4.27vw。
• 可以使用 post-css 专门的插件做转换，或使用预处理样式语言中的函数

@baseScreenWidth: 320;
.px2vw(@name, @px) {
  @{name}: (@px / @baseScreenWidth) * 100vw;
}

@function px2vw($px) {
  @return $px * 100vw / 750;
}

// 以iphone7尺寸@2x 750像素宽的视觉稿为例
@function vw($px) {
  @return ($px / 750) * 100vw;
}

// 假设一个div元素在视觉稿中，宽度为120px，字体大小为12px
div {
  width: vw(120);
  font-size: vw(12);
}

dpr 是什么

• 设备像素比，通过 window.devicePixelRatio 获取
• 是设备上物理像素和设备独立像素（dips）的比例，window.devicePixelRatio = 物理像素 / dips
• 简单的讲其实就是 dpr 决定了 css 1px 等于多少屏幕物理像素

物理像素

• 显示器上最小的物理显示单元，在操作系统的调度下，每一个设备像素都有自己的颜色值和亮度值

设备独立像素（dips）

• 也叫密度无关像素，可以认为是计算机坐标系统中得一个点，这个点代表一个可以由程序使用的虚拟像素（比如: css 像素），然后由相关系统转换为物理像素

viewport

• 用于定义视口的各种行为：视口宽度、初始缩放、最小最大缩放比例、是否允许用户手动缩放