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

孙淑建发布于2019-08-29 13:51 / 3454人阅读

摘要：问题的产生屏会以个乃至个物理像素来显示一个像素，所以在中指定的边框实际占据的却是个以上物理像素，在屏用户体验较差。这其中，的媒体查询里提供了或而浏览器也提供了这个来获取像素和物理像素的比值。

问题的产生

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;
        }

问题：

原元素需要用相对定位

元素上不起作用

其他方法

使用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

GPU云服务器云服务器 html物理像素 retina Retina屏幕我的世界像素云服务器

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112748.html

再谈移动端适配和点5像素的由来

摘要：再谈移动端适配百分比解决方案的缺点在我们的项目中大量的使用百分比来解决页面在宽度上的自适应，其实在高度上并没有很好的自适应。前言这篇文章的内容如题目一样，主要分为两个部分，谈谈业内主流的移动端适配解决方案点5像素的由来和实现方法建议在读这篇文章的时候先读下这篇文章《高清屏概念解析与检测设备像素比的方法_20161005》，因为这些文章涉及的很多概念在这篇文章中都会提到。 ...

lordharrd 2019-08-20 11:31 评论0 收藏0
高清屏概念解析与检测设备像素比的方法

摘要：高清屏概念解析和前端开发的关系高清屏概念解析高清屏概念的兴起主要是从乔帮主发布设备开始兴起。还好我们有一个叫设备像素比的东西来检测当前屏幕是不是属于高清屏幕。前言做移动端h5开发很久了，从开始入行到现在。很多知识和工具都是在用前辈留下的遗产，都没有深入的研究过原因，了解为什么要这么去做。也许自己也是过了交给自己做什么就做什么的阶段了。在国庆节有一个大块的时间，把最近看到的知识总结...

王伟廷 2019-08-29 11:22 评论0 收藏0
零碎的知识（一）

摘要：同时，由于本身的实现大部分是纯函数，因此在版本中，一些不含副作用的均在中暴露了以为前缀的函数方法，也可以直接导入使用。在浏览器中神秘丢失尝试检查被请求的是否存在尾部斜线，具体原因暂时没有找到相关资料。写在前面最近没怎么写新的东西，一是因为一直在准备换新的工作，所以一直在准备面试，二是因为过年，心静不下来，所以也无法输出或者翻译一些文章，三是由于手头还有一些遗留工作需要完成和交接，比...

ernest.wang 2019-08-23 15:36 评论0 收藏0