zoukankan      html  css  js  c++  java
  • 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;
      }
    }
  • 相关阅读:
    四叔的c++入门课(6) 条件语句
    四叔的c++入门课(5)变量类型
    四叔的c++入门课程(4)赋值语句与表达式
    四叔的c++入门课(3)变量
    如何选购笔记本电脑?
    四叔的c++入门课(2)Hello World
    四叔的c++入门课(1)什么是编程
    CSS3 transition-property属性
    display:inline、block、inline-block的区别?
    wps怎样删除空白页 WPS文档的空白页如何删除
  • 原文地址:https://www.cnblogs.com/CyLee/p/6198079.html
Copyright © 2011-2022 走看看