走向Retina Web
RETINA时代的前端优化
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<style>
.g {
width: 300px;
height: 200px;
background-image: url(g.jpg);
background-size: 300px 200px;
}
@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) {
.icon {
background-image: url(g@2x.jpg);
}
}
</style>
<div class="g"></div>
<script>
var img = new Image()
img.width = 300
img.height = 200
img.src = window.devicePixelRatio > 1 ? 'g@2x.jpg' : 'g.jpg'
document.body.appendChild(img)
</script>
</body>
</html>