1、利用scale
.content h1:after,
.content h2:after {
border-top: 9px solid red;
content: ' ';
display: block;
width: 200px;
position: absolute;
left: 0;
bottom: 300px;
-webkit-transform-origin: left bottom;
}
@media only screen and (-webkit-min-device-pixel-ratio:2.0),
only screen and (min--moz-device-pixel-ratio: 2.0),
only screen and (-o-min-device-pixel-ratio: 200/100),
only screen and (min-device-pixel-ratio: 2.0) {
.content h1:after,
.content h2:after {
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}
}
@media only screen and (-webkit-min-device-pixel-ratio:2.5),
only screen and (min--moz-device-pixel-ratio: 2.5),
only screen and (-o-min-device-pixel-ratio: 250/100),
only screen and (min-device-pixel-ratio: 2.5) {
.content h1:after,
.content h2:after {
-webkit-transform:scaleY(0.33333334);
transform: scaleY(0.33333334);
}
}
2.devicePixelRatio,对于不同的像素比的屏幕应用不同的图片
(1)background-size 统一显示图片的大小
-webkit-background-size: 244px 233px;
-moz-background-size: 244px 233px;
background-size: 244px 233px
（2）用媒体查询，min-device-pixel-ratio
<!DOCTYPE html>
<html>
<head>
<title>测试</title>
<meta content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" name="viewport">
<style type="text/css">
.sprite-icons-video {
display: block;
background-position: -62px -201px;
width: 22px;
height: 22px;
}
.sprite-icons-video{
background-image: url(icons_7ee46383c7.png);
background-repeat: no-repeat;
-webkit-background-size: 244px 233px;
-moz-background-size: 244px 233px;
background-size: 244px 233px
}
@media screen and (-webkit-min-device-pixel-ratio: 1), screen and (min--moz-device-pixel-ratio: 1), screen and (-o-min-device-pixel-ratio: 100/100), screen and (min-device-pixel-ratio: 1), screen and (min-resolution: 1dppx) {
.sprite-icons-video{
background-image: url(icons_7ee46383c7.png)
}
}
@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (-o-min-device-pixel-ratio: 200/100), screen and (min-device-pixel-ratio: 2), screen and (min-resolution: 2dppx) {
.sprite-icons-video{
background-image: url(icons@2x_7ee46383c7.png)
}
}
</style>
</head>
<body>
<i class="sprite-icons-video "></i>
</body>
</html>
或者
background-image: -webkit-image-set(url(../images/arrow@2x.png) 2x,
url(../images/arrow@3x.png) 3x);
background-size: contain;
