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';
}
}