有没有办法在CSS媒体查询中使用DPI而不是px [英] Is there a way to use DPI in css media queries instead of px

问题描述

宽度和高度的像素数量并不能始终说明整个故事.这对于在屏幕上添加或删除项目非常有用，但对于设置正确的图像来说并不完全正确.通过MBP上的视网膜显示，将浏览器窗口设置为屏幕的一半，其像素宽度将与当今大多数计算机相同.但是，鉴于较高的DPI，显示的图像可能会太小.

Number of pixels width and height does not always tell the whole story. That works great for adding or removing items from the screen, but isn't quite right for setting the right image. With the retina display on the MBP, a browser window set to half of the screen would have the same number of pixels in width as most machines today. Yet, images displayed would likely be too small given the higher DPI.

是否有一种方法可以根据DPI而不是像素的宽度和高度来更改图像?

Is there a way to change out images based on DPI rather than the number of pixels width and height?

推荐答案

您可以执行以下任一操作:

You can do either:

<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)"
/>

或

@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*/
}   

这篇关于有没有办法在CSS媒体查询中使用DPI而不是px的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！