Có cách nào để sử dụng DPI trong các truy vấn phương tiện css thay vì px

Question

Số lượng điểm ảnh chiều rộng và chiều cao không phải lúc nào cũng kể toàn bộ câu chuyện. Điều đó hoạt động tốt để thêm hoặc xóa các mục khỏi màn hình, nhưng không hoàn toàn phù hợp để thiết lập đúng hình ảnh. Với màn hình hiển thị võng mạc trên MBP, một cửa sổ trình duyệt được đặt thành một nửa của màn hình sẽ có cùng số pixel tương tự như hầu hết các máy hiện nay. Tuy nhiên, hình ảnh hiển thị có thể sẽ quá nhỏ với DPI cao hơn.

Có cách nào để thay đổi hình ảnh dựa trên DPI thay vì số lượng điểm ảnh chiều rộng và chiều cao không?

Answer 1

Bạn có thể làm một trong hai:

<link 
    rel="stylesheet" 
    type="text/css" 
    href="/css/retina.css" 
    media="only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2)" 
/> 

hoặc

@media only screen and (-moz-min-device-pixel-ratio: 2), 
     only screen and (-o-min-device-pixel-ratio: 2/1), 
     only screen and (-webkit-min-device-pixel-ratio: 2), 
     only screen and (min-device-pixel-ratio: 2) { 
/*use CSS to swap out your low res images with high res ones here*/ 
} 

Answer 2

gì bạn đang tìm kiếm là tỷ lệ Device Pixel. Vì những thứ như màn hình iPhone giống như màn hình 320px nhưng với bố cục 640px (tỷ lệ pixel là 2). Trong truy vấn phương tiện, sử dụng "thiết bị-pixel-tỷ lệ". Mặc dù tôi sẽ đảm bảo vẫn sử dụng tiền tố của nhà cung cấp.

Một bài tốt về nó: http://menacingcloud.com/?c=highPixelDensityDisplays

Answer 3

Ngoài ra còn có chức năng <img srcset> và -webkit-image-set css, nhưng họ dường như được hỗ trợ chỉ bằng Safari/Chrome/Opera. Ví dụ:

<img src="image.png" srcset="image-1x.png 1x, 
    image-2x.png 2x, image-3x.png 3x"> 

background-image: -webkit-image-set(
    url(icon1x.jpg) 1x, 
    url(icon2x.jpg) 2x 
); 

Tôi không chắc chắn nếu các ví dụ trong câu trả lời được chấp nhận bởi Moin Zaman hoạt động trên IE/Firefox. Có thể cần sử dụng "độ phân giải tối thiểu":

@media only screen and (min-resolution: 192dpi), 
     only screen and (min-resolution: 2dppx)