[分享]css3实现0.5px

CSS3实现0.5px是一种比较新的技术，而且只有在Retina屏幕上才能看到差别。一般屏幕上的像素都是1个物理像素，而Retina屏幕是2个物理像素合成一个虚拟像素，这就使得我们可以通过CSS构造出...

CSS3实现0.5px是一种比较新的技术，而且只有在Retina屏幕上才能看到差别。一般屏幕上的像素都是1个物理像素，而Retina屏幕是2个物理像素合成一个虚拟像素，这就使得我们可以通过CSS构造出0.5px的边框。

// 先定义viewport的缩放比例
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

// 定义Retina屏幕下的样式
@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) {
    .half-pixel-border {
        border: 0.5px solid black;
    }
}

// 定义非Retina屏幕下的样式
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5),
only screen and (min-resolution: 144dpi),
only screen and (min-resolution: 1.5dppx) {
    .half-pixel-border {
        border: 0.75px solid black;
    }
} 

以上代码就是实现0.5px边框的方法，我们可以定义不同的样式来适应不同的Retina屏幕，这样能够让网页在视觉上更加细腻，看起来更加专业。