Hallo Mathias!
PS: Hast du evt. auch noch einen Tipp bezüglich eines Mixins für 'resolution', bzw. 'min-device-pixel-ratio'?
Den verwende ich:
@mixin two-dppx()
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx)
@content
Nur fürs Archiv:
~~~css
@mixin two-dppx {
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {
@content
}
}
Man kann natürlich beliebige weitere Device-Pixel-Ratios unterstützen, aber mich interessieren derzeit nur 1 (default) und 2 (mit obiger MQ).
Ja, mal abgesehen davon, dass es durchaus auch noch andere (relevante) Auflösungen gibt, aber wie sieht es denn mit der Kombination mit anderen media features aus?
Und was ist mit den anderen Vendor Prefixes? Sind die nicht mehr nötig (sprich, nicht mehr relevant)?
@media
only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 60em),
only screen and ( min--moz-device-pixel-ratio: 2) and (min-width: 60em),
only screen and ( -o-min-device-pixel-ratio: 2/1) and (min-width: 60em),
only screen and ( min-device-pixel-ratio: 2) and (min-width: 60em),
only screen and ( min-resolution: 192dpi) and (min-width: 60em),
only screen and ( min-resolution: 2dppx) and (min-width: 60em) {
/* Medium screen, retina, stuff to override above media query */
}
Gruß Gunther