Article Detail

关于像素的相关知识移动web开发之像素和DPR

定义像素，又称画素，是图像显示的基本单位，译自英文“pixel”，pix是英语单词picture的常用简写，加上英语单词“元素”element，就得到pixe...

HTML 阅读 52.4万 5 分钟阅读 2018-02-06 14:50

定义

像素，又称画素，是图像显示的基本单位，译自英文“pixel”，pix是英语单词picture的常用简写，加上英语单词“元素”element，就得到pixel，故“像素”表示“图像元素”之意，有时亦被称为pel(picture element)

像素是网页布局的基础。一个像素就是计算机能够显示一种特定颜色的最小区域。当设备尺寸相同但像素变得更密集时，屏幕能显示的画面的过渡更细致，网站看起来更明快。

//ppi是指屏幕上每英寸可以显示的像素点的数量，即屏幕像素密度

分类

实际上像素分为两种：设备像素和CSS像素

1、设备像素(device independent pixels): 设备屏幕的物理像素，任何设备的物理像素的数量都是固定的

2、CSS像素(CSS pixels): 又称为逻辑像素，是为web开发者创造的，在CSS和javascript中使用的一个抽象的层

每一个CSS声明和几乎所有的javascript属性都使用CSS像素，因此实际上从来用不上设备像素，唯一的例外是

screen.width/height

//我们通过CSS和javascript代码设置的像素都是逻辑像素
width:300px;
font-size:16px;

缩放

在桌面端，css的1个像素往往都是对应着电脑屏幕的1个物理像素。

//一个CSS像素完全覆盖了一个设备像素

而在手机端，由于屏幕尺寸的限制，缩放是经常性的操作。

//设备像素(深蓝色背景)、CSS像素(半透明背景)

//上图表示当用户进行缩小操作时，一个设备像素覆盖了多个CSS像素

//上图表示当用户进行放大操作时，一个CSS像素覆盖了多个设备像素

不论我们进行缩小或放大操作，元素设置的CSS像素(如width:300px)是始终不变的，而一个CSS像素对应多少个设备像素是根据当前的缩放比例来决定的

DPR

设备像素比DPR(devicePixelRatio)是默认缩放为100%的情况下，设备像素和CSS像素的比值

DPR = 设备像素 / CSS像素(某一方向上)

在早先的移动设备中，并没有DPR的概念。随着技术的发展，移动设备的屏幕像素密度越来越高。从iphone4开始，苹果公司推出了所谓的retina视网膜屏幕。之所以叫做视网膜屏幕，是因为屏幕的PPI(屏幕像素密度)太高，人的视网膜无法分辨出屏幕上的像素点。iphone4的分辨率提高了一倍，但屏幕尺寸却没有变化，这意味着同样大小的屏幕上，像素多了一倍，于是DPR = 2

实际上，此时的CSS像素对应着以后要提到的理想视口，其对应的javascript属性是screen.width/screen.height

而对于设备像素比DPR也有对应的javascript属性window.devicePixelRatio

以iphone5为例，iphone5的CSS像素为320px*568px，DPR是2，所以其设备像素为640px*1136px

    640(px) / 320(px)  = 2
    1136(px) / 568(px) = 2
    640(px)*1136(px) /  320(px)*568(px) = 4

Comments 评论区

广西南宁市 2018-02-06 14:53

非常清晰，我的理解DPR就是CSS里设定的尺寸与显示在真机上的，现在很多手机都是自己默认的DPR，比如ip6plus的DPR是3.0，我们写css的时候，宽度和高度是100px，显示在ip6plus上的时候就是300px

#⁰

广西南宁市 2018-02-06 14:55

border 1px 问题

由于最小的物理像素差异，一条直线的显示，iphone5它能显示的最小宽度其实是理论上说的0.5px。
　　　　不是所有手机浏览器都能识别border: 0.5px;，ios7以下，android等其他系统里，0.5px会被当成为0px处理
　　　　通常是给元素order-bottom: 1px solid #ddd;，然后通过transform: scaleY(.5)缩小0.5倍来达到0.5px的效果，

.scale{
    position: relative;
}
.scale:after{
    content:"";
    position: absolute;
    bottom:0px;
    left:0px;
    right:0px;
    border-bottom:1px solid #ddd;
    -webkit-transform:scaleY(.5);
    -webkit-transform-origin:0 0;
}

广西南宁市2018-02-06 14:56:13

通常我们在写移动端时，是按照设计稿标注的像素除以设备的DPR来写真实的像素，
比如在iPhone6上，我们写的20px字体世界上在视觉效应上有20px;
所以当我们写1px边框时，在手机上看起来会变粗变为2px；

#⁰

广西南宁市 2018-02-06 14:57

Javascript获取屏幕的分辨率（PPI/DPI）
获取PPI：

<script>function js_getDPI() {
    var arrDPI = new Array;
    if (window.screen.deviceXDPI) {
        arrDPI[0] = window.screen.deviceXDPI;
        arrDPI[1] = window.screen.deviceYDPI;
    }
    else {
        var tmpNode = document.createElement("DIV");
        tmpNode.style.cssText = "width:1in;height:1in;position:absolute;left:0px;top:0px;z-index:99;visibility:hidden";
        document.body.appendChild(tmpNode);
        arrDPI[0] = parseInt(tmpNode.offsetWidth);
        arrDPI[1] = parseInt(tmpNode.offsetHeight);
        tmpNode.parentNode.removeChild(tmpNode);    
    }
    return arrDPI;
}
window.onload=function(){
		alert("当前屏幕PPI "+js_getDPI());
}</script>

#⁰

广西南宁市 2018-02-06 15:02

两个常用的rem布局方式

关于rem
这种技术需要一个参考点，一般都是以<body>的“font-size”为基准。
比如我们设置body，html的字体大小为10px；那么1rem就是10px,
这样一来，我们设置字体大小相当于“14px”时，只需要将其值设置为“1.4em”。
1.手机淘宝一直用的方法：思路是通过js动态的获取设备的DPR（设备像素比），根据dpr来改变标签

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;"/>

中的属性值；

var dpr, rem, scale;
var docEl = document.documentElement;
var fontEl = document.createElement('style');
var metaEl = document.querySelector('meta[name="viewport"]');

dpr = window.devicePixelRatio || 1;
rem = docEl.clientWidth * dpr / 10;
scale = 1 / dpr;
// 设置viewport，进行缩放，达到高清效果
metaEl.setAttribute('content', 'width=' + dpr * docEl.clientWidth + ',initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale + ',user-scalable=no');

// 设置data-dpr属性，留作的css hack之用
docEl.setAttribute('data-dpr', dpr);

// 动态写入样式
docEl.firstElementChild.appendChild(fontEl);
fontEl.innerHTML = 'html{font-size:' + rem + 'px!important;}';


window.dpr = dpr;
window.rem = rem;

此时在dpr=2时1rem=75px;
所以如果我们要设置div的宽度为750px;(注：750px,为设计稿中div的宽度)就要写为：width：750/75*1rem;

最后因为dpr为2，页面scale了0.5，所以在手机屏幕上显示的真实宽高应该是375px，就刚刚好。
如果设置的值不是好算的数字，比如123px,那就很蛋疼了
为了减少计算，在less中可以定义以下函数

.change_val(@name, @px){
    @{name}: @px / 75 * 1rem;
}

这样在less中就可以写为

.container{ 
　　.change_val (width,123); //123是设计稿原值 
　　.unchanged_val(font-size,100)
}

另：在设计中我们一般希望font-size一直固定不变对此：

.unchanged_val(@name, @px){
    @{name}: round(@px / 2) * 1px;
  [data-dpr="2"] & {
      @{name}: @px * 1px;
  }
  // for mx3
  [data-dpr="2.5"] & {
      @{name}: round(@px * 2.5 / 2) * 1px;
  }
  // for 小米note
  [data-dpr="2.75"] & {
      @{name}: round(@px * 2.75 / 2) * 1px;
  }
  [data-dpr="3"] & {
      @{name}: round(@px /*3 / 2) * 1px
  }
  [data-dpr="3.5"] & {
      @{name}: round(@px * 3.5 / 2) * 1px;
  }
  // for 三星note4
  [data-dpr="4"] & {
      @{name}: @px * 2px;
  }
}

2.我们可以以iphone6（375*667）设计稿为原型：

设置css

html {
  font-size: calc(100vw/3.75);
}

这个意思就是设置 html的font-size为100px;

因为这样写比较方便，比如在写一个div宽度为75px时，直接定义width：0.75rem;就可以了
为了避免calc()的兼容性问题，可以加上如下js；

document.documentElement.style.fontSize = window.innerWidth/3.75 + 'px';

#⁰

广西南宁市 2018-02-09 17:28

【混乱博物馆】无穷大等于几——从音乐到量子论_趣味科普

#⁰

Comment Form 留下评论

正在回复 #0

粘贴图片、拖拽文件，或点上面的按钮上传 图片会自动插入 [img] 标签，其他附件会自动插入 [attach] 标签。

正在上传...

提交前会先拉起旧项目同款第三方人机验证。

不再要求填写昵称；reply 会生成一条带楼层回链的新评论，quote 会附带完整引用块，并保持评论锚点跳转。