HTML5之图片在Retina屏的常用几种处理方式

Media Queries
使用css3的媒体查询实现高清屏的图片处理。

@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) {

    .logo {

        background-image: url('img/logo@2x.jpg');

        background-size: 400px 200px; width: 400px; height: 200px;

    }

}

sass的mixin

//-----------------------------------Retina图片-----------------------------------------

@mixin image-2x($image, $width, $height) {

    @media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6/2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {

        /* on retina, use image that's scaled by 2 */

        background-image: url($image);

        background-size: $width $height;

    }

}

retina.js下载免费CND GitHub

CSS4的image-set属性

.test {

    background-image: url('img/logo.jpg');

    background-image: -webkit-image-set(url('img/logo.jpg') 1x,url('img/logo@2x.jpg') 2x);

    background-size: 425px 195px;

    width: 425px;

    height: 195px;

}

HTML5 picture Element

<picture>

   <source media="(min-width: 1024px)" srcset="foo-large.jpg  1024w, foo-medium.jpg 640w, foo-small.jpg 320w" sizes="50vw" />

   <source srcset="foo@2x.jpg 2x, foo.jpg 1x" />

   <img src="foo.jpg" alt="Bar" />

</picture>

服务端处理 Retina Images github
使用方法

巴特西

HTML5之图片在Retina屏的常用几种处理方式

最新文章

热门文章