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>
巴特西

Retina

最新文章

热门文章
