前端面试CSS系列——移动端1PX像素问题

时间 2021-06-13

标签 css html git github web 浏览器 iphone 移动端web wordpress 布局栏目快乐工作繁體版

原文原文链接

基本概念

设备像素

英文Device Pixels，缩写为DP，有时候也叫『物理像素』。
设备像素是咱们描述电子产品等实物的一个单位；好比咱们说相机3000W像素，手机1亿像素，电视机4K。
在咱们形容电子设备屏幕分辨率1920*1080时，说的像素也是设备像素，不过一般说的是最大像素。css

设备独立像素

英文Device Independent Pixels，缩写为DIPs，有时候也叫『逻辑像素』。
CSS、JavaScript、PS当中咱们常说像素。好比说字体大小，图片宽高时的像素，就是设备独立像素。
在浏览器中，能够经过screen.width获得设备独立像素html

设备像素比

英文Device Pixels Ratio，缩写为DPR；表示一个设备的物理像素与设备独立像素之比。
能够经过 window.devicePixelRatio获得当前设备的设备像素与CSS设备独立像素之比。git

PPI

英文Pixels Per Inch，缩写PPI；表示每英寸所拥有的像素数量，有时候也叫『像素密度』。
当咱们描述手机、IPad，电脑显示器等电子设备屏幕尺寸大小的时，咱们一般会说5.5英寸，27英寸，40英寸。
相同尺寸大小的屏幕，不一样的分辨率下，PPI『像素密度』是不同的。
PPI的计算公式是：

一样是4.3英寸的屏幕，A的分辨率是480 800，B的分辨率是720 1280。
A屏幕的像素密度『PPI』是210；
B屏幕的像素密度『PPI』是340；
相同屏幕尺寸，PPI值越大画面的细节就会越丰富，直观来说就是PPI值越大，画面越清晰。github

视网膜显示屏

是一种由苹果公司设计和委托制造的显示屏，具有足够高像素密度，而使得人体肉眼没法分辨其中单独像素点的液晶屏幕。
简单理解就是相同屏幕尺寸的显示屏，视网膜显示屏PPI值更大了。web

为何会有1PX的问题

在Retian屏上，DPR再也不是1，而是大于1，好比二、3或者非整数。IPhone 6的设备像素『物理像素』是750 1334，它的设备独立像素『逻辑像数』是375 667，根据公司计算出DRP = 2。
你想画个1PX的下边框，手机屏幕实际上给分配了2个设备像素『物理像素』。浏览器

1PX边框问题实现方案

border-image 图片

.border-image-1px {
  border-width: 1px 0px;
  -webkit-border-image: url("data:image/png;base64,xxx") 2 0 stretch;
}

background-image 渐变

.border {
  background-image:linear-gradient(180deg, red, red 50%, transparent 50%),
    linear-gradient(270deg, red, red 50%, transparent 50%),
    linear-gradient(0deg, red, red 50%, transparent 50%),
    linear-gradient(90deg, red, red 50%, transparent 50%);
  background-size: 100% 1px, 1px 100%, 100% 1px, 1px 100%;
  background-repeat: no-repeat;
  background-position: top, right top,  bottom, left top;
  padding: 10px;
}

viewport + rem + js 实现

<html>  
    <head>  
        <title>1像素问题</title>  
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">  
        <meta name="viewport" id="WebViewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">       
        <style>  
          html {
             font-size: 1px;
          }
          * {
            padding: 0;
            margin: 0;
          }
          .bds_b {
            border-bottom: 1px solid #ccc;
          }
          .a,
          .b {
            margin-top: 1rem;
            padding: 1rem;
            font-size: 1.4rem;
          }
          .a {
            width: 30rem;
          }
          .b {
            background: #f5f5f5;
            width: 20rem;
          }
        </style>  
        <script>  
          
            var viewport = document.querySelector("meta[name=viewport]");  
            //下面是根据设备像素设置viewport  
            if (window.devicePixelRatio == 1) {  
                viewport.setAttribute('content', 
                                      'width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no');  
            }  
            if (window.devicePixelRatio == 2) {  
                viewport.setAttribute('content', 
                                      'width=device-width,initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no');  
            }  
            if (window.devicePixelRatio == 3) {  
                viewport.setAttribute('content', 
                                      'width=device-width,initial-scale=0.3333333333333333, maximum-scale=0.3333333333333333, minimum-scale=0.3333333333333333, user-scalable=no');  
            }  
            var docEl = document.documentElement;  
            var fontsize = 10 * (docEl.clientWidth / 320) + 'px';  
            docEl.style.fontSize = fontsize;  
              
        </script>  
    </head>  
  
    <body>  
        <div class="bds_b a">下面的底边宽度是虚拟1像素的</div>  
        <div class="b">上面的边框宽度是虚拟1像素的</div>  
    </body>  
  
</html>

box-shadow实现

div {
  -webkit-box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.5);
}

transform:scale(0.5)实现

方法1
用height:1px的div，而后根据媒体查询设置transform: scaleY(0.5);iphone

div {
  height: 1px;
  bakcground: #000；
  -webkit-transform: scaleY(0.5);
  -webkit-transform-origin: 0 0;
  overflow: hidden;
}

方法2
用::after和::before伪类，设置border-bottom: 1px solid #000，而后再缩放-webkit-transform: scaleY(0.5)；能够实现两根边线的需求移动端web

div::after {
  content: '';
  width: 100%;
  border-bottom: 1px solid #000;
  transform: scaleY(0.5);
}

方法3
用::after设置border:1px solid #000;width:200%;height: 200%;，而后再缩放scale(0.5);wordpress

.div::after {
  content: '';
  width： 200%;
  height: 200%;
  position: absolute;
  top: 0;
  left: 0;
  border： 1px solid #bfbfbf;
  border-radius: 4px;
  -webkit-transform: scale(0.5, 0.5);
  transform: scale(0.5, 0.5);
  -webkit-transform-origin: 0 0;
}

参考

移动H5开发中1像素边框问题
 掌握web开发基础系列
 视网膜显示屏
 移动端web页面知识小结之像素、物理像素、逻辑像素
 Mobile physical pixels and device independent pixels
CSS布局基础之一设备像素，设备独立像素，设备像素比，css像素之间的关系
 设备像素比
 移动端高清、多屏适配方案
 iPhone 6 屏幕揭秘
 移动端1像素边框问题的解决方案布局