- 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屏的常用几种处理方式
原文地址：https://www.cnblogs.com/linx/p/8446724.html