ratina 视网膜屏幕解决方案大全

第三方教程

http://www.tuicool.com/articles/JBreIn

 知乎

https://www.zhihu.com/question/21653056

 

强烈推荐！！！最牛逼最专业最方便的retina解决方案：ratina.js 

# Github
https://github.com/imulus/retinajs

# 官网
http://retinajs.com/

 使用方式：

准备两张图片：logo.png 和 logo@2x.png

<script src="assets/js/retina.min.js"></script>
<script>
　　// 开启retina模式，选择器为所有属性带data-rjs的元素
　　retinajs($("*[data-rjs]"));
</script>

# 方式一：指定2倍/3倍
<a class="logo ir" href="./index.php" title="微餐时代logo"><img src="assets/images/common/logo.png" data-rjs="2" alt="微餐时代logo" width="140" height="44"></a> 

# 方式二：指定路径
<a class="logo ir" href="./index.php" title="微餐时代logo"> <img src="assets/images/common/logo.png" data-rjs="assets/images/common/logo@2x.png" alt="微餐时代logo" width="140" height="44"> </a>


# 方式三：通过style指定路径
<a class="logo ir" href="./index.php" data-rjs="2" style="background:url('assets/images/common/logo.png')" title="微餐时代logo"></a>

 

Ps:没有Mac电脑怎么调试？打开谷歌浏览器的DevTool 工具并且切换到iphone系列的模式刷新即可模拟mac操作系统

https://uiux.cc/blog/a-wonderful-way-to-test-your-websites-for-retina-by-google-chrome-without-an-actual-retina-display/

 

然而，通过js来切换还是有缺陷的，就是会先加载window（模糊版），再加载IOS（高清版）。解决方案是使用background-images + @media

.ir{display:block;    height: 44px;    width: 140px;    background: url(../images/common/logo.png) no-repeat center center;}
@media all and (-webkit-min-device-pixel-ratio: 1.5),
       all and (-o-min-device-pixel-ratio: 3 / 2),
       all and (min--moz-device-pixel-ratio: 1.5),
       all and (min-device-pixel-ratio: 1.5) {
  .ir {
    background: url(../images/common/logo@2x.png) no-repeat center center;
    background-size: 140px 44px;
  }
}