css3 - 网页上的img引用的图片如何适配retina屏幕呢?
阿神
阿神 2017-04-17 11:01:33
0
3
555

如果是CSS里的,可以用下面的代码适配,但是如果是的又该怎么适配呢?

@media 
  only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2) {

}
阿神
阿神

闭关修行中......

membalas semua(3)
Ty80

1. Retina.js,会造成两次图像的请求。

http://retinajs.com/

2. JS替换SRC的方法,会造成两次图像的请求。

2.1 自定义一种属性

<img src="/imgs/a.png" src="/imgs/a@2x.png">
<!--相对简单,使用jQuery.data("src")就可以取到-->
<img src="/imgs/a.png" src='{"retina":"/imgs/a@2x.png"}'>
<!--比较复杂,jQuery会自动按JSON的方式读取,这个扩展性更佳,还可以根据1.5倍屏幕给出相应的图片地址,或者针对IE6给出PNG16的兼容图片地址-->

2.2 使用某种方式匹配相应的标签

jQuery("img[src]")//效率在有些浏览器中很低
jQuery("img.rep-src") //需要在HTML中写入更多属性,这里是定义CSS类"rep-src",维护相对麻烦

2.3 针对相应的屏幕做SRC的替换。

if ( window.devicePixelRatio && window.devicePixelRatio > 1 ) {
    jQuery(this).attr( "src" , jQuery(this).data("src") ) ;
    //如果自定义的属性是JSON式的,则会这样写:
    //jQuery(this).attr( "src" , jQuery(this).data("src")["retina"] ) ;
} //当然实际应用肯定不能写得这么草率,各种情形下的判断要加上。

3.等待新标准……

扩展阅读:

http://ued.taobao.com/blog/2013/01/css-and-html5-adaptive-images/

http://www.zhangxinxu.com/wordpress/2012/10/new-pad-retina-devicepixelratio-css-page/

黄舟

我有一个不完美的,抛砖引玉
没有测试过,随口回答,只想表达我的思想

@media 
only screen and (-webkit-min-device-pixel-ratio: 2),  
only screen and (min-device-pixel-ratio: 2) {  
    img .retina_style {display:block;}  
    img .no_retina{display:none;}  
}  
迷茫

楼主有什么好的方案了吗?

对于不支持srcset的浏览器,

最近在搞页面活动也碰到这样的问题。

暂时用js完成任务的

Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan