zoukankan      html  css  js  c++  java
  • Retina 屏幕分辨率

    .icon {
      background-image: url(example.png);
      background-size: 200px 300px;
      height: 300px;
       200px;
    }
    
    @media only screen and (-Webkit-min-device-pixel-ratio: 1.5),
    only screen and (-moz-min-device-pixel-ratio: 1.5),
    only screen and (-o-min-device-pixel-ratio: 3/2),
    only screen and (min-device-pixel-ratio: 1.5) {
      .icon {
        background-image: url(example@2x.png);
      }
    }
    

      

    Retina和普通屏

    @media only screen and (min- 320px) {
    
      /* Small screen, non-retina */
    
    }
    
    @media
    only screen and (-webkit-min-device-pixel-ratio: 2)      and (min- 320px),
    only screen and (   min--moz-device-pixel-ratio: 2)      and (min- 320px),
    only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min- 320px),
    only screen and (        min-device-pixel-ratio: 2)      and (min- 320px),
    only screen and (                min-resolution: 192dpi) and (min- 320px),
    only screen and (                min-resolution: 2dppx)  and (min- 320px) { 
    
      /* Small screen, retina, stuff to override above media query */
    
    }
    
    @media only screen and (min- 700px) {
    
      /* Medium screen, non-retina */
    
    }
    
    @media
    only screen and (-webkit-min-device-pixel-ratio: 2)      and (min- 700px),
    only screen and (   min--moz-device-pixel-ratio: 2)      and (min- 700px),
    only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min- 700px),
    only screen and (        min-device-pixel-ratio: 2)      and (min- 700px),
    only screen and (                min-resolution: 192dpi) and (min- 700px),
    only screen and (                min-resolution: 2dppx)  and (min- 700px) { 
    
      /* Medium screen, retina, stuff to override above media query */
    
    }
    
    @media only screen and (min- 1300px) {
    
      /* Large screen, non-retina */
    
    }
    
    @media
    only screen and (-webkit-min-device-pixel-ratio: 2)      and (min- 1300px),
    only screen and (   min--moz-device-pixel-ratio: 2)      and (min- 1300px),
    only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min- 1300px),
    only screen and (        min-device-pixel-ratio: 2)      and (min- 1300px),
    only screen and (                min-resolution: 192dpi) and (min- 1300px),
    only screen and (                min-resolution: 2dppx)  and (min- 1300px) { 
    
      /* Large screen, retina, stuff to override above media query */
    
    }
    

      

     

    /* iPads (landscape) */
    		@media screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
    			//你的样式放在这里...
    		}
    		/* iPads (portrait) */
    		@media screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
    			//你的样式放在这里...
    		}
    	
    

      iPhone 4

    @media only screen and (-webkit-min-device-pixel-ratio : 1.5),only screen and (min-device-pixel-ratio : 1.5) {
    	/* Styles */
    }
    

      

  • 相关阅读:
    php javascript
    在线支付接口之PHP支付宝接口开发
    作业9 最长公共子序列
    第十二章 税制的设计
    第十一章 公共物品和公共资源
    第十章 外部性
    第九章 应用:国际贸易
    作业8 矩阵乘法链
    第八章 应用:赋税的代价
    第七章 消费者、生产者与市场效率
  • 原文地址:https://www.cnblogs.com/wallaceyuan/p/5006407.html
Copyright © 2011-2022 走看看