zoukankan      html  css  js  c++  java
  • 移动端1px的边框

    我们知道,在移动端存在物理像素(physical pixel)设备独立像素(density-independent pixel)的概念。物理像素也称为设备像素,它是显示设备中一个最微小的物理部件,每个像素可以根据操作系统设置自己的颜色和亮度。设备独立像素也称为密度无关像素,可以认为是计算机坐标系统中的一个点,这个点代表一个可以由程序使用的虚拟像素(比如CSS像素),然后由相关系统转换为物理像素。根据物理像素和设备独立像素也衍生出了设备像素比(device pixel ratio)的概念,简称为dpr,其定义了物理像素和设备独立像素的对应关系,其计算公式为设备像素比 = 物理像素 / 设备独立像素。因为视网膜(Retina)屏幕的出现,使得一个物理像素并不能和一个设备独立像素完全对等,如下图所示:

    在上图中,在普通屏幕下1个CSS像素对应1个物理像素,而在Retina屏幕下,1个CSS像素却对应4个物理像素,即在Retina屏幕下会有不同的dpr值。为了追求在移动端网页中更好的显示质量,因此我们需要做各种各样的适配处理,最经典的莫过于1px物理像素边框问题,我们需要根据移动端不同的dpr值来对边框进行处理。在JavaScript中,可以通过window.devicePixelRatio来获取当前设备的dpr,在CSS中,可以通过-webkit-device-pixel-ratio,-webkit-min-device-pixel-ratio和-webkit-max-device-pixel-ratio来进行媒体查询,从而针对不同的设备,来做一些样式适配。这里对于1px像素的边框问题,给出一种最常见的写法:
    .border-1px {
        position: relative;
    }
    
    .border-1px::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
         100%;
        height: 1px;
        background-color: #000;
        -webkit-transform: scaleY(.5);
        transform: scaleY(.5);
    }
    
    @media only screen and (-webkit-min-device-pixel-ratio: 2.0), (min-device-pixel-ratio: 2.0) {
        .border-1px::after {
            -webkit-transform: scaleY(.5);
            transform: scaleY(.5);
        }
    }
    
    @media only screen and (-webkit-min-device-pixel-ratio: 3.0), (min-device-pixel-ratio: 3.0) {
        .border-1px::after {
            -webkit-transform: scaleY(.33);
            transform: scaleY(.33);
        }
    }



  • 相关阅读:
    itext itextpdf 版本概要介绍
    github上的优秀项目和开发环境配置
    tfs2012 的体验地址
    Linux网卡攻略
    展现图表JavaScript库 Javascript web charts [参考地址]
    JavaEE的几个参考
    dsl boo3个例子 9
    已读的和在读的一些C++经典图书
    WinRT参考资料
    Linux性能监测工具
  • 原文地址:https://www.cnblogs.com/chen-cheng/p/11949719.html
Copyright © 2011-2022 走看看