zoukankan      html  css  js  c++  java
  • 移动web之一像素问题

    一、为什么会有一像素问题

    弄明白这个问题,首先要知道DPR了。

      DPR(device pixel ratio)pixel等于picture element。设备像素比,是默认缩放100%的情况下,即DPR=设备像素个数/理想视口像素个数(device-width)。

      1.设备像素:设备的物理像素,任何设备的物理像素都是固定不变的。

      2.布局视口:移动端css布局所依据的视口,即css布局是根据布局视口来计算的。理想视口即为理想的布局视口。

    拿iPhone6为例,当我们写一像素线border-top:1px solid red;时,屏幕显示的1px的红线吗?显然不是。布局视口是移动端我们css布局的依据视口,在我们设置<meta name="viewport" content="device-width">时就将布局视口设置为理想视口了。iPhone6的DPR=2,因此在屏幕上显示的其实是2px的红线。有人说,那我们写css布局时写border-top:0.5 solid red;不就完了吗。想法很好,但是计算机会将0.5计算成1。
    二、transform:scale

    这里的解决办法是对这条线进行缩放,使用伪元素::before或者::after来实现一像素边框,再利用@media适配不同的设备像素比,来确定缩放比例。

    .border-top {
        position: relative;
    }
    .border-top::before {
        position: absolute;
        top: 0;
        left: 0;
        content: " ";
         100%;
        height: 1px;
        background-color: #e4e4e4;
    }
    
    /* 2倍屏 */
    @media  (min-resolution: 2dppx){  // 设备像素比 -webkit-min-device-pixel-ratio 不是标准的css特性,推荐使用分辨率特性resolution
        .border-top::before {
            transform: scaleY(0.5);
        }
    }
    
    /* 3倍屏 */
    @media (min-resolution: 3dppx) {
        .border-top::before {
            transform: scaleY(0.33);
        }
    }

      

  • 相关阅读:
    Oracle索引
    Oracle Union Union All 对查询结果集操作
    Oracle表连接
    BIOS + MBR > UEFI + GPT
    Opensource Licenses
    Linux 系统下使用dd命令备份还原MBR主引导记录
    Linux 文件类型笔记
    Linux 分支那么多,这里可以帮你缩小选择范围
    Arch Linux 的休眠设置
    Arch Linux pacman 与其他发行版操作比较
  • 原文地址:https://www.cnblogs.com/chen-cong/p/8060386.html
Copyright © 2011-2022 走看看