关于设备像素比dpr的理解
做手机端项目,不可避免要寻找一个手机端页面与手机屏幕适配最佳方案。在这之前,我觉得还是要去理解一下dpr(设备像素比)。我们还要了解一些与dpr相关的概念:
(1)物理像素(physical pixel)
一个物理像素是显示器(手机屏幕)上最小的物理显示单元(像素颗粒),在操作系统的调度下,每一个设备像素都有自己的颜色值和亮度值。
如:iPhone6上就有750*1334个物理像素颗粒。
(2)设备独立像素(density-independent pixel)
设备独立像素(也叫密度无关像素),可以认为是计算机坐标系统中得一个点,这个点代表一个可以由程序使用的虚拟像素(比如: css像素),有时我们也说成是逻辑像素。
(3)设备像素比(device pixel ratio )简称dpr
设备像素比(简称dpr)定义了物理像素和设备独立像素的对应关系。
(4)公式:
设备像素比 = 物理像素 / 逻辑像素(px) Ps:在某一方向上,x方向或者y方向
如:iPhone6的dpr为2,物理像素750(x轴),则它的逻辑像素为375。 也就是说,1个逻辑像素,在x轴和y轴方向,需要2个物理像素来显示,如下图:
问题:为什么以iPhone6为标准的设计稿的尺寸是以750px宽度来设计的呢?
iPhone6的满屏宽度是375px(Viewport’s device-width (in CSS pixels):375px),而iPhone6采用的视网膜屏的物理像素是满屏宽度的2倍,并且设计师所用的PS设计软件分辨率和像素关系是1:1。所以为了做出的清晰的页面,设计师一般给出750px的设计图,我们再根据需求对元素的尺寸设计和压缩。
关于设备像素比dpr的理解相关推荐
- h5移动端设备像素比dpr介绍
首先介绍一下概念 devicePixelRatio其实指的是window.devicePixelRatio window.devicePixelRatio是设备上物理像素和设备独立像素(device- ...
- CSS像素、物理像素、逻辑像素、设备像素比、PPI、Viewport
最近看了很多这方面的文章,能搜到的基本看了个遍,但感觉还是似懂非懂,知道这个东西,很难说出这是个什么东西,先整理一些概念,慢慢消化,以后慢慢探索其中的原因. 1.PX(CSS pixels) 1.1 ...
- CSS像素、物理像素、逻辑像素、设备像素比、PPI、Viewport(转载)
1.PX(CSS pixels) 1.1 定义 虚拟像素,可以理解为"直觉"像素,CSS和JS使用的抽象单位,浏览器内的一切长度都是以CSS像素为单位的,CSS像素的单位是px. ...
- 像素相关概念:PPI、DPI、设备像素、独立像素
前言 我相信对于像素,英文「pixel」,缩写「px」,这个概念并不陌生吧,不管是设计师设计图片用的单位 px,还是前端工程师在 css 里面的单位 px等等,很多领域都会用到这个单位,但是当我问他们 ...
- 困扰前端的像素相关概念:PPI、DPI、设备像素、独立像素
我相信对于像素,英文「pixel」,缩写「px」,这个概念并不陌生吧,不管是设计师设计图片用的单位 px,还是前端工程师在 css 里面的单位 px等等,很多领域都会用到这个单位,但是当我问他们一些问 ...
- css中的单位换算_CSS像素、物理像素、逻辑像素、设备像素比、PPI、Viewport
1.PX(CSS pixels) 1.1 定义 虚拟像素,可以理解为"直觉"像素,CSS和JS使用的抽象单位,浏览器内的一切长度都是以CSS像素为单位的,CSS像素的单位是px. ...
- 移动web开发之像素和DPR详解
前话: 像素在web开发中几乎天天用到,但到底什么是像素,移动端和桌面端的像素有区别吗,缩放对像素有影响吗,视网膜屏幕和像素有什么关系?关于这些问题,可能就不清楚了.本文将介绍关于像素的相关知识 什么 ...
- 像素、设备像素比、PPI、Viewport
像素 PX 其实很多会 Photoshop 的人都有一个误区:认为像素是一个宽高相等的小方块,并且的像素都是"那么大",但是不知道这个宽高的具体数字. 然而其实 pixel(像素) ...
- 自适应设计涉及的知识点(CSS像素、物理像素、逻辑像素、设备像素比、PPI、Viewport)
1.PX(CSS pixels) 1.1 定义 虚拟像素,可以理解为"直觉"像素,CSS和JS使用的抽象单位,浏览器内的一切长度都是以CSS像素为单位的,CSS像素的单位是px. ...
最新文章
- springboot整合mybatis增删改查(三):mybatis逆向工程
- python timestamp转string_Python仿真区块链【含源码】
- 多模态理论张德禄_结构动力学中的模态分析(3) —— 模态参数及实验模态分析...
- 基于Boost::beast模块的同步WebSocket服务器
- linux上安装activeMQ
- 三个帮助你整理信息的桌面 WiKi
- 30条值得程序员借鉴的好习惯
- Leetcode c语言-Implement strStr()
- python入门经典100题-零基础学习Python开发练习100题实例(1)
- Spring核心之一:Spring的配置文件是干什么的
- 介绍字模软件使用场景
- 【AI视野·今日CV 计算机视觉论文速览 第175期】Fri, 10 Jan 2020
- Xcode8写代码闪退
- 背景音乐默认播放css,可以通过CSS改变背景音乐播放器的颜色吗?
- acme + acme-dns + google domains 签发泛域名证书
- 洗牌 --网易有道2017内推编程题
- linux线程详解:线程概念、线程调度、线程安全、线程模型
- SQLite julianday DateTime日期时区问题小记录
- 【大学物理·光学】光的偏振状态
- Acwing 238. 银河英雄传说
热门文章
- 计算思维实践之路(一)
- openid php steam,Steam OpenID签名验证
- MODBUS RTU转PROFIBUS DP 转换器怎么接线远创智控
- openoffice java awt_使用openoffice转pdf,详细
- 网红汉字手机全屏时钟APP下载
- Servlet3 过滤器 Filer
- win10蓝牙功能不见了_Win10 2004更新了什么?新功能新特性汇总
- 中国超级计算机神威 上市公司,神威、天河、曙光三巨头引领中国超级计算机发展...
- 深圳可能是理解中国数字城市建设的窗口
- 游泳馆馆所以及会员管理系统