css4中响应式图片

原创 2015年07月08日 16:05:33

-webkit-min-device-pixel-ratio常见值对照表

响应式图片可以这样

background-image:url(default.jpg); /* 普通幕 */

background-image: -webkit-image-set(url(medium.jpg) 1x, url(large.jpg) 2x); /* Retina高清屏 */

background-image:url(1.png);

background-image:-webkit-image-set(url() 1x,url() 2x,);

  • -webkit-min-device-pixel-ratio为1.0
  1. 所有非Retina的Mac
  2. 所有非Retina的iOS设备
  3. Acer Iconia A500 
  4. Samsung Galaxy Tab 10.1
  5. Samsung Galaxy S 

 

  • -webkit-min-device-pixel-ratio为1.3
  1. Google Nexus 7

 

  • -webkit-min-device-pixel-ratio为1.5
  1. Google Nexus S 
  2. Samsung Galaxy S II 
  3. HTC Desire
  4. HTC Desire HD
  5. HTC Incredible S 
  6. HTC Velocity
  7. HTC Sensation 

 

  • -webkit-min-device-pixel-ratio为2.0
  1. iPhone 4
  2. iPhone 4S
  3. iPhone 5
  4. iPad (3rd generation)
  5. iPad 4
  6. 所有Retina displays 的MAC
  7. Google Galaxy Nexus
  8. Google Nexus 4
  9. Google Nexus 10
  10. Samsung Galaxy S III
  11. Samsung Galaxy Note II
  12. Sony Xperia S
  13. HTC One X 

span.location {
  background: url(location.png) no-repeat 0 0;
}

span.success {
  background: url(success.png) no-repeat 0 0;
} 

a.delete {
  background: url(delete.png) no-repeat 0 -100px;
} 

.content a.fav-link {
  background: url(favorite.png) no-repeat 0 0;
}

@media only screen and (-webkit-min-device-pixel-ratio: 2), 
only screen and (min-device-pixel-ratio: 2) {
  span.location {
    background-image: url(location@2x.png);
    background-size: 16px 14px;
  }

  span.success {
    background-image: url(success@2x.png);
    background-size: 13px 14px;
  }

  a.delete {
    background: url(delete@2x.png) no-repeat 0 -100px;
  } 

.content a.fav-link {
  background-image: url(favorite@2x.png);
  background-size: 11px 13px;
  }
}
span.location {
  background: url(sprite.png) no-repeat 0 0;
}

span.success {
  background: url(sprite.png) no-repeat -100px 0;
} 

a.delete {
  background: url(sprite.png) no-repeat -100px -100px;
} 

.content a.fav-link {
  background: url(sprite.png) no-repeat 0 -100px;
}

@media only screen and (-webkit-min-device-pixel-ratio: 2), 
only screen and (min-device-pixel-ratio: 2) {
  span.location,
  span.success,
  a.delete,
  .content a.fav-link {
    /* Reference the @2x Sprite */
    background-image: url(sprite@2x.png);
    /* Translate the @2x sprite's dimensions back to 1x */
    background-size: 200px 200px; 
  }
}




相关文章推荐

Css3处理响应式图片

随着 Retina 屏幕的逐渐普及,网页中对图片的适配要求也越来越高。如何让图片在放大了两倍的 Retina 屏幕显示依然清晰,曾经一度困扰着网页开发者,好在 CSS3 与 HTML5 已经着力在改变...
  • mingkr
  • mingkr
  • 2014年06月29日 21:05
  • 347

bootstrap基本的CSS样式 图片 响应式工具

1.响应式图片 2.图片形状

如何让图片按比例响应式缩放、并自动裁剪的css技巧

如何让图片按比例响应式缩放、并自动裁剪的css技巧同时也适用于一些轮播父容器响应式缩放响应式网站、移动端页面在DIV CSS布局中对于图片列表或图片排版时, 如果想要图片按比例缩放, 最简单的就是...

Bootstrap-CSS-按钮-图片-辅助类-响应式

按钮   可作为按钮使用的标签或元素 为 、 或 元素添加按钮类(button class)即可使用 Bootstrap 提供的样式。 虽然按钮类可以应用到 和 元素上,但是,导...

用CSS创建响应式图片

在学习如何利用CSS建立响应式图片前,我们要先了解一下什么是响应式图片。响应式图片是用户代理根据输出设备的分辨率不同加载不同类型的图片,不会造成带宽的浪费。同时,在改变输出设备类型或分辨率时,能及时加...

图片轮播插件-基于HTML5+CSS3+JavaSript的响应式图片轮播

考虑到不久后的混合开发要用(跑移动端,效率是个问题),先写个插件吧 这是基于HTML5 + CSS3 和原生JavaScript的无缝轮播(左近右出); 因为是在android上开发,所以只定义了...

jQuery响应式图片无缝轮播插件1

  • 2017年05月02日 10:14
  • 301KB
  • 下载

HTML5 -- 使用css3实现简单的响应式布局

本文简单的讲解了如何使用css3实现简单的响应式布局:html5文件: index01...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css4中响应式图片
举报原因:
原因补充:

(最多只允许输入30个字)