var metaEl = doc.createElement('meta'); var scale = isRetina ? 0.5:1; metaEl.setAttribute('name', 'viewport'); metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no'); if (docEl.firstElementChild) { document.documentElement.firstElementChild.appendChild(metaEl); } else { var wrap = doc.createElement('div'); wrap.appendChild(metaEl); documen.write(wrap.innerHTML); }
事实上他做了这几样事情：
添加<meta>标签，并动态改写 <meta> 标签
给 <html> 元素添加 data-dpr 属性，并且动态改写 data-dpr 的值
给 <html> 元素添加 font-size 属性，并且动态改写 font-size 的值
3. 布局（以scss为例）
1）基本布局：rem
将视觉稿中的px单位转换成rem单位 ：
html元素尺寸 = 视觉稿px值 / rem基准值
例如：视觉稿宽度750px，则html中的缩放倍率就是750 / 10 = 75，然后以这个为基准值，如果视觉稿中某块小内容宽度是150px，则html中这块内容宽度就是 150 / 75 = 2rem
2）字号:px
字号用px单位，并根据情况用[data-dpr]属性来区分不同dpr下的文本字号大小。
为了能更好的利于开发，在实际开发中，我们可以定制一个 font-dpr()Sass混合宏：
@mixin font-dpr($font-size){ font-size: $font-size; [data-dpr="2"] & { font-size: $font-size * 2; } [data-dpr="3"] & { font-size: $font-size * 3; } }
设置混合宏之后，在开发中可以直接这样使用：@include font-dpr(24px);