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

时间：2021-10-26 22:23:26

第三方教程

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;

  }

}


相关文章