设计师想要的 retina 下 border: 1px;，其实就是 1 物理像素宽，对于 css 而言，可以认为是 border:0.5px;，这是 retina 下(dpr=2)下能显示的最小单位。

然而，无奈并不是所有手机浏览器都能识别 border: 0.5px;，ios7 以下，android 等其他系统里， 0.5px 会被当成为 0px 处理，那么如何实现这 0.5px 呢？

方案一： 最简单的一个做法就是这样(元素 scale)：

.scale{ position: relative;}

.scale:after {content:""; position: absolute; bottom:0px; left:0px; right:0px; border-bottom:1px solid #ddd; -webkit-transform:scaleY(.5); -webkit-transform-origin:0 0;}

方案一问题:

通过 transform: scaleY(.5)缩小 0.5 倍来达到 0.5px 的效果，但是这样 hack 实在是不够通用(如：圆角等)。

方案二：页面 scale 的方案，是比较通用的，几乎满足所有场景。

对于 iphone5(dpr=2)，添加如下的 meta 标签，设置 viewport(scale 0.5)：

页面 scale，必然会带来一些问题：

1）字体大小会被缩放

2）页面布局会被缩放(如: div 的宽高等)

二、多屏适配布局问题

　　　　1） 下载bower下载lib-flexible

　　　　将flexible_css.js,flexible.js文件加载到项目中：

　　　　或直接加载阿里CDN的文件：

　　　　2).flexible 实际上作用

　　　　就是能过JS来动态改写 meta 标签，代码类似这样：

　　　　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); 　　　　}

　　　　事实上他做了这几样事情：

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);

　　　　本文有任何错误，或有任何疑问，欢迎留言说明！