cssが1 px未満のフレームワークの実装

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

または

background-image: -webkit-image-set(url(../images/[email protected]) 2x,
url(../images/[email protected]) 3x);
 background-size: contain;