dpi和css,CSS3 设备像素比例（DPI）测试

CSS

语言：

CSSSCSS

确定

html {

display: table;

width: 100%;

height: 100%;

}

body {

background: red;

text-align: center;

font: 5em monospace;

color: white;

text-shadow: 0 3px rgba(0, 0, 0, .25);

display: table-cell;

vertical-align: middle;

width: 100%;

}

body:before,

body:after {

display: block;

}

body:before {

content: 'Device pixel density: ';

font-size: .5em;

}

body:after {

content: "1x / 96 dpi";

font-weight: bold;

}

@media (-webkit-min-device-pixel-ratio: 1.5),

(min-resolution: 120dpi) {

body {

background: blue;

}

body:after {

content: '1.5x / 120dpi';

}

}

@media (-webkit-min-device-pixel-ratio: 2),

(min-resolution: 192dpi) {

body {

background: cyan;

}

body:after {

content: '2x / 192 dpi';

}

}

@media (-webkit-min-device-pixel-ratio: 3),

(min-resolution: 288dpi) {

body {

background: green;

}

body:after {

content: '3x / 288 dpi';

}

}

@media (-webkit-min-device-pixel-ratio: 4),

(min-resolution: 384dpi) {

body {

background: yellow;

}

body:after {

content: '4x / 384 dpi';

}

}