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; 
  }
}




响应式图片的3种解决方案

个人总结:在当前响应设计和自适应设计的流行下,很多web 应用往往都兼容手机、平板和PC,其中一个让人比较头痛的问题就是图片的加载了。不同平台显然不可能用同一张大的图片,这样子不但浪费手机流量、影响网...
  • qq_34986769
  • qq_34986769
  • 2016年10月13日 13:57
  • 1347

Bootstrap响应式图片的进一步处理

最近在做一个项目,首页特别简单 这是半成品,但是刚开始的时候使用图标的时候,遇到过一个较大的问题,接下来与大家分享。 既然是响应式布局,肯定我们的图片必须要有 class="img-respons...
  • Brave_Coder
  • Brave_Coder
  • 2015年12月16日 19:08
  • 3585

10款响应式 jQuery实现图片效果插件

1.基于jQuery实现的汇图网大屏焦点图效果 汇图网大屏jQuery焦点图代码,可设置切换模式,如淡入淡出切换,左右滚动切换,上下滚动切换,可设置是否自动轮播,可设置鼠标划过是否停止播放等。 ...
  • bingqingsuimeng
  • bingqingsuimeng
  • 2015年01月12日 19:59
  • 2099

HTML5中的picture元素响应式处理图片

是HTML5的一个新元素; 如果元素与当前的,元素协同合作将增强响应式图像工作的进程,它允许在其内部设置多个标签,以指定不同的图像文件名,根据不同的条件进行加载; 可以根据不同的条件加载不同的图像,这...
  • github_36534129
  • github_36534129
  • 2016年12月09日 12:15
  • 2457

bootstrap下实现轮播图的响应式

bootstrap下实现轮播图的响应式重要的是思想,其实很简单,因为bootstrap是支持栅格布局的,而恰好栅格布局是响应式的主要布局,所以我们可以把轮播图放入栅格布局中,先来一个大的栅格布局,分三...
  • s740556472
  • s740556472
  • 2017年01月27日 13:17
  • 1433

2017.1.08用bootstrap构造响应式轮播图

要求:利用bootstrap中的carousel插件创建一个响应式轮播图,轮播图要求是:1、当屏幕为大屏幕时让轮播图中的图片大小为2000px*410px大小,当屏幕宽度小于768px时,轮播图中的图...
  • fredaouyang
  • fredaouyang
  • 2017年01月08日 16:53
  • 673

实现网站的响应式轮播图

首先,得前人经验,借助插件实现轮播,不必吭哧吭哧绞尽脑计想逻辑,只需调属性即可,那么 怎么样来挑选第三方组件: 1.使用人数 以免踩坑 2.是否开源 3.文档是否齐全 使用帮助 ...
  • u012396955
  • u012396955
  • 2017年03月06日 22:52
  • 260

响应式,图片与其他元素一同等比缩放

今天学做响应式,发现个问题:   如何让其他元素也像图片一样等比例的缩放 如图, 啦啦啦我是文字   box的高度自适应...
  • qi1271199790
  • qi1271199790
  • 2017年03月04日 00:28
  • 519

CSS实现响应式全屏背景图

当前很流行的一种网页形式就是满屏大图,本文将用最简单的方式实现该效果。用到了CSS 属性background-size ,无需javascript。...
  • assokoo123
  • assokoo123
  • 2016年12月28日 16:38
  • 610

10个免费的响应式布局HTML5+CSS3模板

http://www.html5cn.org/article-6799-1.html 现在的自由响应式的HTML5模板的有着高度的市场需求,因为他们完全改变了网站设计与开发工业来说,是比较容易的...
  • denglixin118
  • denglixin118
  • 2015年12月13日 19:48
  • 1333
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css4中响应式图片
举报原因:
原因补充:

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