AdiHuang

Posted 2016-10-04Note

retinajs使用摘要

官方文档：retinajs

注：需要准备的图片名称格式

image.png
image@2x.png
image@3x.png

现在有4种实现方式：

自动交换“img”标签的”src”路径。
在内联样式中自动交换背景图像的网址。
手动指定一个高分辨率的图像不同位置。
自动创建CSS背景图像媒体查询。

Posted 2016-10-04Note

Retina屏幕下border 1px解决方案

retinal屏幕下@2x, @3x会使css设定好的border 1px变成2倍或者3倍。
以@2x为例，用css解决这个放大的问题（此方法能解决直线）

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

Tags