[分享]css3怎么给高设百分比

随着移动设备使用的普及，越来越多的网站需要支持高分辨率的屏幕。这种屏幕上的像素点比普通屏幕上的像素点更小，因此，在同样的屏幕尺寸下，显示出来的文字和图片会更加清晰锐利。这种屏幕被称为高设（HiDPI）...

随着移动设备使用的普及，越来越多的网站需要支持高分辨率的屏幕。这种屏幕上的像素点比普通屏幕上的像素点更小，因此，在同样的屏幕尺寸下，显示出来的文字和图片会更加清晰锐利。这种屏幕被称为高设（HiDPI）屏幕。

@media (-webkit-min-device-pixel-ratio: 2), 
       (min-resolution: 192dpi) { 
    /* 在高设屏幕上，所有1px的线条都会变成2px */ 
    .line { border-bottom: solid 1px #000; } 
}

在CSS3中，我们可以通过使用像素比（Pixel Ratio）来处理这种情况。像素比是设备上渲染的物理像素数和网页上使用的逻辑像素数之比。例如，如果像素比为2，那么在一个200×200像素的区域内，实际上渲染了400×400个物理像素。

我们可以使用媒体查询来检测设备上的像素比，并为高设屏幕提供特定的样式。例如，在上面的代码中，我们使用了一个像素比为2的媒体查询。在该查询中，我们将使用1个像素边框改变为2个像素边框，以适应高设屏幕的需求。