一像素边框实现

作者: 二熊不是熊二 | 来源:发表于2019-04-14 20:37 被阅读0次

Android 日志工具包
input标签隐藏边框
给控件添加边框
Flutter 边框阴影
float
边框渐变border-image与border-radius冲突
移动端一像素边框
带边框的虚线
添加虚线边框|单边框
《css-secrets》-demo：多重边框

下文部分引用于移动端1像素边框问题，这篇文章写得很详细，值得一看。

为什么移动端一像素边框和pc端不一样？

其实这两个px的含义其实是不一样的，UI设计师要求的1px是指设备的物理像素1px，而CSS里记录的像素是逻辑像素，它们之间存在一个比例关系，可以用javascript中的window.devicePixelRatio来获取，也可以用媒体查询的-webkit-min-device-pixel-ratio来获取。

移动端开发常需要在html的header里添加如下一句： <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> 这句话定义了本页面的viewport的宽度为设备宽度，初始缩放值和最大缩放值都为1，并禁止了用户缩放。

viewport，中文名叫视口，其实它就是设备屏幕上能用来显示我们网页内容的那一块区域，具体点就是浏览器或app中的webview用来显示网页的那部分区域，但viewport又不局限于浏览器可视区域的大小，可能大也可能小。体现在用户是否缩放了屏幕。

因此，最终的原因是：viewport的设置和屏幕物理分辨率是按比例而不是相同的. 移动端window对象有个devicePixelRatio属性, 它表示设备物理像素和css像素的比例, 在retina屏的iphone手机上, 这个值为2或3, css里写的1px长度映射到物理像素上就有2px或3px那么长。

如何实现移动端一像素边框？

利用伪类实现一像素边框

border-1px($color)
  position:relative  
  &:after 
    display:block
    position: absolute
    left:0
    bottom:0
    border-top:1px solid $color
    content:' '
    width:100%

利用媒体查询，根据不同的物理像素比，调整缩放比例，从而实现一像素边框

//1.5倍屏
@media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5)
  .border-1px
    &::after
      -webkit-transform: scaleY(0.7)
      transform: scaleY(0.7)
//2倍屏
@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2)
  .border-1px
    &::after
      -webkit-transform: scaleY(0.5)
      transform: scaleY(0.5)