-webkit-min-device-pixel-ratio的顺序问题

因为非Retina屏的iPad的-webkit-min-device-pixel-ratio是1.0

Retina屏的设备是2.0。所以如果想对这两类设备分别设置css样式时，可以使用

@media screen and (-webkit-min-device-pixel-ratio: 1.0)和@media screen and (-webkit-min-device-pixel-ratio: 2.0)来区分。但是要注意顺序，如果2.0在前1.0在后并且设置的属性相同而值不同，那么Retina屏的设备的同属性的样式会被2.0的覆盖。必须把2.0放在1.0之后，例如：

@media screen and (-webkit-min-device-pixel-ratio: 1.0){

    div {

        background-color: red;

    }

}

@media screen and (-webkit-min-device-pixel-ratio: 2.0){

    div {

        background-color: green;

    }

}