Để bao gồm đồ họa có độ phân giải cao, nhưng chỉ dành cho màn hình có thể sử dụng chúng. “Retina” là “2x”:
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) ( /* Retina-specific stuff here */ )Hoặc cao hơn khác:
/* 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 */ )Nội dung cũ (không sử dụng, lưu giữ cho hậu thế)
@media only 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 */ )Đây là bằng chứng trong tương lai…
@media only 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 */ )Ghi chú:
- Điều siêu kỳ lạ
min--moz-device-pixel-ratiocó lẽ là một lỗi, cũng có thể muốn đưa vào-moz-min-device-pixel-ratiotrong trường hợp họ sửa nó nhưng vẫn để tiền tố. - Đây là thông số về đơn vị độ phân giải.
Thí dụ:
Giả sử bạn có ba điểm đột phá chính trong một thiết kế. Thiết kế này cũng có đồ họa nền lớn và bạn muốn nó trông đẹp nhất trên mọi màn hình (võng mạc hoặc không) và không lãng phí băng thông. Bạn sẽ thiết lập 6 truy vấn phương tiện, một cho mỗi điểm ngắt và một cho mỗi điểm ngắt đó trên võng mạc. Sau đó, bạn sẽ ghi đè toàn bộ hình nền xuống.
@media only screen and (min-width: 320px) ( /* Small screen, non-retina */ ) @media only 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 */ ) @media only 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 */ ) @media only 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 */ )