Tôi đang cố gắng hỗ trợ nhiều tỷ lệ pixel trên trang web hiện tại mà tôi đang phát triển. Tôi cũng muốn đảm bảo rằng tôi cung cấp bất kỳ tiền tố trình duyệt bắt buộc nào để hỗ trợ nhiều loại thiết bị/trình duyệt nhất định trong phạm vi lý do. Ngoài ra, tôi đang sử dụng SVG bất cứ nơi nào có thể, nhưng tôi cần một giải pháp cho hình ảnh chụp ảnh. Lý tưởng nhất, tôi muốn cung cấp:Truy vấn phương tiện cho @ 2x, @ 3x và @ 4x hình ảnh
- @ hình ảnh 1x (Pixel Ratio 1.0) (Ratio Pixel của 1.25+)
- @ 2x ảnh
- @ 3x hình ảnh (Ratio Pixel của 2.25+)
- @ 4x ảnh (Ratio Pixel của 3.25+)
câu hỏi của tôi là những gì sẽ là cách tốt nhất để đi về cách viết các truy vấn phương tiện truyền thông để đạt được điều này? Mối quan tâm chính của tôi là lập luận của tôi là chính xác cho những gì tôi đang cố gắng đạt được. Tôi đánh giá cao bất kỳ đề xuất hoặc lời khuyên nào bạn có. Hiện nay mã của tôi là như sau:
/* @1x Images (Pixel Ratio 1.0) */
#dgst_shopping_bag {background-image:url(img/shopping_bag.png);}
/* @2x Images (Pixel Ratio of 1.25+) */
@media only screen and (-o-min-device-pixel-ratio: 5/4),
only screen and (-webkit-min-device-pixel-ratio: 1.25),
only screen and (min-device-pixel-ratio: 1.25),
only screen and (min-resolution: 1.25dppx) {
#dgst_shopping_bag {background-image:url(img/[email protected]);}
}
/* @3x Images (Pixel Ratio of 2.25+) */
@media only screen and (-o-min-device-pixel-ratio: 9/4),
only screen and (-webkit-min-device-pixel-ratio: 2.25),
only screen and (min-device-pixel-ratio: 2.25),
only screen and (min-resolution: 2.25dppx) {
#dgst_shopping_bag {background-image:url(img/[email protected]);}
}
/* @4x Images (Pixel Ratio of 3.25+) */
@media only screen and (-o-min-device-pixel-ratio: 13/4),
only screen and (-webkit-min-device-pixel-ratio: 3.25),
only screen and (min-device-pixel-ratio: 3.25),
only screen and (min-resolution: 3.25dppx) {
#dgst_shopping_bag {background-image:url(img/[email protected]);}
}
Alternative 1: Tôi đã nghiên cứu triển khai thẻ <picture> để thực hiện điều này. Tôi biết bạn có thể cung cấp nội dung thay thế cho các trình duyệt không hỗ trợ <picture>, đó sẽ là mối quan tâm chính của tôi trong việc sử dụng nội dung đó. Các bạn có nghĩ đó sẽ là phương pháp hay nhất để cung cấp ảnh cho nhiều tỷ lệ pixel?
viết tắt: Là hình ảnh của bạn tất cả cùng một chiều rộng trên tất cả các thiết bị? –
Đối với phần lớn các thiết bị, kích thước hình ảnh là như nhau. Tôi chỉ đang trao đổi tài sản cho màn hình mật độ điểm ảnh cao. Tuy nhiên đối với các điểm ngắt thấp hơn, một số hình ảnh có kích thước nhỏ hơn do giới hạn kích thước màn hình. – Mastrianni