retina屏中1物理像素border的实现

时间 2019-11-17

标签 retina 物理像素 border 实现繁體版

原文原文链接

问题的产生

retina屏会以2个（乃至3个）物理像素来显示一个CSS像素（1px），因此在CSS中指定1px的边框实际占据的倒是2个以上物理像素，在retina屏用户体验较差。css

几种解决方案（考虑1px=2dip）

使用0.5px

问题：只在Firefox and Safari 8+支持，安卓不支持。浏览器

使用图片

采用一张图片做为border：bash

border-width: 1px;
border-image: url(border.gif) 2 repeat;
复制代码

border-img属性会将图片（如上图）切为九宫格，放到边框的四边和四角。因为图片外沿一半为实色、一半为透明，因此1px的图片边框，实际显示出的就是0.5px的边框了。ide

问题：ui

没法设置颜色
边框实际仍是占用了1px的空间
不使用base64的状况下，要加载多一张图片

使用渐变

原理相似上面的图片，将1px的渐变拆为两半，一半透明一半实色，但好处是做为背景不会实际占据盒子的0.5px空间。url

background: linear-gradient(180deg, black, black 50%, transparent 50%) top left / 100% 1px no-repeat,
            linear-gradient(90deg, black, black 50%, transparent 50%) top right / 1px 100% no-repeat, 
            linear-gradient(0, black, black 50%, transparent 50%) bottom right / 100% 1px no-repeat, 
            linear-gradient(-90deg, black, black 50%, transparent 50%) bottom left / 1px 100% no-repeat; 
复制代码

问题：没法处理圆角spa

使用缩放

给一个原元素两倍大小的伪元素，指定1px边框，再缩小一半，便可获得0.5px边框。设计

.retina-border-scale {
    position: relative;
}
.retina-border-scale:before {
    content: '';
    border: 1px solid black;
    transform: scale(0.5);
    transform-origin: 0 0;
    width: 200%;
    height: 200%;
    position: absolute;
    left: 0;
    top: 0;
}
复制代码

问题：code

原元素须要用相对定位
<td>元素上不起做用

其余方法

使用box-shadow：实现简单，但效果很差、会有阴影
直接按照放大的设计稿重构，再指定viewport的initial-scale=0.5缩小整个页面：简单粗暴

对非retina屏的兼容

因为非retina屏下的1物理像素border直接用px作单位便可，所以针对不一样屏幕，会有多套样式实现。
而为了正确地应用样式，首先得有判断retina屏的能力。这其中，CSS的媒体查询里提供了min-device-pixel-ratio或min-resolution；而浏览器也提供了window.devicePixelRatio这个js API来获取CSS像素和物理像素的比值。
最后，咱们就能够根据屏幕在代码里应用适当的样式了。orm

ref

CSS, Retina, and Physical Pixels