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 */
    }
    

      

  • 相关阅读:
    nginx location 语法
    nginx 日志文件
    nginx 配置文件详解
    mysql分区partition
    MySQL跳过密码登录
    min/max优化,count ,group by
    in型子查询陷阱,exists子查询
    explain分析sql效果
    HDU2896 病毒侵袭 —— AC自动机
    二分图之 多重匹配 和 最大权匹配 等总结
  • 原文地址:https://www.cnblogs.com/wallaceyuan/p/5006407.html
Copyright © 2011-2022 走看看