像素 & 1px

说明

像数

为影像显示的基本单位。 https://www.wikiwand.com/zh-sg/%E5%83%8F%E7%B4%A0

CSS像素(CSS pixels)

浏览器使用的抽象单位,用来精确度量网页上的内容。 eg:平时经常写的width:100px;height:100px; 都是与设备无关的。

设备独立像素 (device - independent-pixels)

也可以称为设备无关的逻辑像素

meta里面设置width=device-width,这个device-width就是设备独立像素 。

在chrome里 看到的375*667 320*480等等都是设备独立像素,它们在数值上与css数值是相等的

设备像素(device pixels )

也称为物理像素,是显示屏的最小物理单位,每一像素都包含自己的颜色、亮度。像素是没有大小的、是一个抽象概念、是一个相对单位。

Device Pixel Ratio,设备像素比。

window.devicePixelRatio。 一般情况下: DPR = DP / DIP

以我手上的 pro6 为例:
window.devicePixelRatio // 3  
screen.width, screen.height // 320 640

官网分辨率: 1920 x 1080

关于像素

有一个常见的错误理解:认为像素是一个宽高相等的小方块,并且的像素都是“那么大”,但是不知道这个宽高的具体数字。分辨率:泛指量测或显示系统对细节的分辨能力。以PC屏幕,手机屏幕为例,分辨率1920*1080 是指屏幕纵向能显示1920个像素,横向能显示1080个像素 描述分辨率的单位有:dpi(点每英寸)、lpi(线每英寸)和ppi(像素 每英寸)。从技术角度说,“像素”只存在于电脑、手机显示领域,而“点”只出现于打印或印刷领域。

ppi( pixel per inch)

显示器的每英寸像素值,首先要确定屏幕的尺寸和分辨率。 以尺寸为4.7英寸、分辨率为1334*750的iphone6为例

逻辑像素(dp,pt)

为了抹去高密度分辨率屏幕(高清屏)所带来的适配问题,iOS与Android两个平台分别提出了pt(point)与dp(device-independent pixel)两个单位。他们的名称不一样,但是内涵是一样的。

视网膜屏

视网膜(Retina)屏幕是乔布斯的一个营销术语。

Viewport

layout viewport 和 visual viewport。

Layout viewport - 渲染视图,渲染页面所需要的尺寸
Visual viewport - 视觉视图,浏览器可视区域尺寸

CSS 的多种单位

参考

0.5px 的问题

首先自己确实对移动端不熟啊,很多东西都没有认真研究过。那么下面说下 0.5px 的问题吧,网上文章太多,质量良莠不齐。其实 0.5px 这个问题准确来说是讲得 1px 的问题。

在熟悉了上面说的 设备像素和设备独立像素后 来理解这个 1px 的问题就迎刃而解了。那么这个问题到底说的是什么呢?

乔布斯提出了 视网膜屏 这个概念,其实算是个营销术语吧。其实对于 ppi 高于 300 的屏幕都可以说成是视网膜屏。就目前大多数手机而言, ppi 都很高, DPR 都是 >2 的。 那么就变成了多个物理像素来显示一个逻辑像素。这就是大家说的 1px 变成了 2px 的问题。其实这里有个错误,应该是 1像素 成了 2像素, 因为这个指的是 物理像素。而逻辑像素上 1px 就是 1px ,并没有变大。

那么我们现在需要 1个物理像素的border, 并且需要考虑圆角。

rem + viewport

// 美团为例: http://i.meituan.com/
// 正常情况:
<meta name="viewport" content="initial-scale=1, user-scalable=no">  
html {  
    font-size: 50px;
}

// 高 DPR: 
<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">  
html {  
    font-size: 100px;
}

baidu google 都是 initial-scale=1 , 即使是大网站,都有不同的设置和理解。

这个方法,也是目前我觉得最好的,没有明显的兼容性问题,完全不用考虑圆角等,而使用其他 hack 手段。

Box-shadow

效果还不错

<div class="example--box-shadow"></div>  
<div class="example--box-shadow-round"></div>  
<div class="example--box-shadow-2"></div>


.example--box-shadow {
  box-shadow: 0 0.5px 0 #000;
}

.example--box-shadow-2 {
  box-shadow: 0 0.1px 0 #000;
}

.example--box-shadow-round {
  width: 200px;
  height: 100px;
  margin-left: 100px;
  border-radius: 10px;
  box-shadow: 0 0 0 0.5px #000;
}

iOS8 +

JS判断UA,是否是ios8+,是的话则输出类名hairlines,为了防止重绘,这段代码加在head里即可。

if (/iP(hone|od|ad)/.test(navigator.userAgent)) {  
    var v = (navigator.appVersion).match(/OS (\d+)_(\d+)_?(\d+)?/),
        version = parseInt(v[1], 10);
    if(version >= 8){
        document.documentElement.classList.add('hairlines')
    }
}

是否支持0.5px边框

JS判断是否支持0.5px边框,是的话,则输出类名hairlines。

if (window.devicePixelRatio && devicePixelRatio >= 2) {  
  var testElem = document.createElement('div');
  testElem.style.border = '.5px solid transparent';
  document.body.appendChild(testElem);
  if (testElem.offsetHeight == 1)
  {
    document.querySelector('html').classList.add('hairlines');
  }
  document.body.removeChild(testElem);
}

div {  
  border: 1px solid #bbb;
}

.hairlines div {
  border-width: 0.5px;
}

radio 的媒体查询

这个用于图片等一些处理还不错,毕竟 0.5 不是谁都有的(2333)

.css{
    background-image: url(img_1x.png); // 普通显示屏(设备像素比例小于等于1.3)使用1倍的图 
    border: 1px;
}
@media only screen and (-webkit-min-device-pixel-ratio:1.5){
.css{
    background-image: url(img_2x.png); // 高清显示屏(设备像素比例大于等于1.5)使用2倍图 
    border: 0.5px;
  }
}

其余

这几个方法效果比较差,就不多说了。

  • transform: scale(0.5)
  • linear-gradient(to bottom, #000 0%, #000 51%, transparent 51%)
  • 图片

参考: