首页 > 其他分享> 文章详细

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

2020-06-11 21:56:41 阅读：315 来源： 互联网

标签：屏中 retina 50% 像素 1px black border

问题的产生

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

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

使用0.5px

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

使用图片

采用一张图片作为border：

        border-width: 1px;border-image:url(border.gif) 2 repeat;

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

问题：

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

使用渐变

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

        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;

问题：无法处理圆角

使用缩放

给一个原元素两倍大小的伪元素，指定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;
        }

问题：

原元素需要用相对定位
<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像素和物理像素的比值。
最后，我们就可以根据屏幕在代码里应用适当的样式了。

ref

CSS, Retina, and Physical Pixels

本文转载于:猿2048retina屏中1物理像素border的实现

标签：屏中,retina,50%,像素,1px,black,border
来源： https://www.cnblogs.com/10yearsmanong/p/13096286.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9