1. 首页
  2. css

CSS视网膜显示媒体查询

用于包括高分辨率图形,但仅用于可以使用它们的屏幕。\”视网膜是\”2x\”:
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {/* Retina-specific stuff here */}
或其他高分辨率:
/* 1.25 dpr */@media (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi){/* Retina-specific stuff here */}/* 1.3 dpr */@media (-webkit-min-device-pixel-ratio: 1.3), (min-resolution: 124.8dpi){/* Retina-specific stuff here */}/* 1.5 dpr */@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi){/* Retina-specific stuff here */}旧东西(不要使用,为子孙后代保留)
@mediaonly screen and (-webkit-min-device-pixel-ratio: 2),only screen and (min–moz-device-pixel-ratio: 2),only screen and (-o-min-device-pixel-ratio: 2/1) {/* Retina-specific stuff here */}
这是更能证明未来的…
@mediaonly screen and (-webkit-min-device-pixel-ratio: 2),only screen and (min–moz-device-pixel-ratio: 2),only screen and (-o-min-device-pixel-ratio: 2/1),only screen and (min-device-pixel-ratio: 2),only screen and (min-resolution: 192dpi),only screen and (min-resolution: 2dppx) {/* Retina-specific stuff here */}
注意:
– 超级怪异的min–moz-device-pixel-ratio可能是一个bug,可能还需要加上-moz-min-device-pixel-ratio,以防他们修复它,但保留前缀。
– 这是分辨率单位的规范。
例如:
假设在一个设计中有三个主要断点。这种设计也有一个大的背景图形,你希望它看起来最好的任何屏幕(视网膜或没有),而不是浪费任何带宽。您可以设置6个媒体查询,每个断点一个,视网膜上每个断点一个。然后您可以覆盖整个背景图像。
@media only screen and (min-width: 320px) {/* Small screen, non-retina */}@mediaonly screen and (-webkit-min-device-pixel-ratio: 2)and (min-width: 320px),only screen and (min–moz-device-pixel-ratio: 2)and (min-width: 320px),only screen and (-o-min-device-pixel-ratio: 2/1)and (min-width: 320px),only screen and (min-device-pixel-ratio: 2)and (min-width: 320px),only screen and (min-resolution: 192dpi) and (min-width: 320px),only screen and (min-resolution: 2dppx)and (min-width: 320px) {/* Small screen, retina, stuff to override above media query */}@media only screen and (min-width: 700px) {/* Medium screen, non-retina */}@mediaonly screen and (-webkit-min-device-pixel-ratio: 2)and (min-width: 700px),only screen and (min–moz-device-pixel-ratio: 2)and (min-width: 700px),only screen and (-o-min-device-pixel-ratio: 2/1)and (min-width: 700px),only screen and (min-device-pixel-ratio: 2)and (min-width: 700px),only screen and (min-resolution: 192dpi) and (min-width: 700px),only screen and (min-resolution: 2dppx)and (min-width: 700px) {/* Medium screen, retina, stuff to override above media query */}@media only screen and (min-width: 1300px) {/* Large screen, non-retina */}@mediaonly screen and (-webkit-min-device-pixel-ratio: 2)and (min-width: 1300px),only screen and (min–moz-device-pixel-ratio: 2)and (min-width: 1300px),only screen and (-o-min-device-pixel-ratio: 2/1)and (min-width: 1300px),only screen and (min-device-pixel-ratio: 2)and (min-width: 1300px),only screen and (min-resolution: 192dpi) and (min-width: 1300px),only screen and (min-resolution: 2dppx)and (min-width: 1300px) {/* Large screen, retina, stuff to override above media query */}

CSS视网膜显示媒体查询 为WP2原创文章,链接:https://www.wp2.cn/css/css%e8%a7%86%e7%bd%91%e8%86%9c%e6%98%be%e7%a4%ba%e5%aa%92%e4%bd%93%e6%9f%a5%e8%af%a2/