移动web开发之像素和DPR

今天看到一个面试题,为iphone6s的自适应,答案是@media(min-device-width:414px) and(max-device-width:736px) and(-webkit-min-device-pixel-ratio:3){}

当时不理解DPR是什么,于是乎查阅资料发现这篇解释很不错。http://www.cnblogs.com/xiaohuochai/p/5494624.html

前面的话

  像素在web开发中几乎天天用到,但到底什么是像素,移动端和桌面端的像素有区别吗,缩放对像素有影响吗,视网膜屏幕和像素有什么关系?关于这些问题,可能就不清楚了。本文将介绍关于像素的相关知识

定义

  像素,又称画素,是图像显示的基本单位,译自英文“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

device-pixel-radio的更多相关文章

  1. Device Pixel Ratio & Media Queries

    一些重要的名词解释: CSS pixels(CSS 像素):详见http://www.w3.org/TR/css3-values/#reference-pixe CSS声明的像素值,可随着放大缩小而放 ...

  2. 移动端 解决自适应 和 多种dpr (device pixel ratio) 的 [淘宝] 解决方案 lib-flexible

    其实H5适配的方案有很多种,网上有关于这方面的教程也非常的多. 不管哪种方法,都有其自己的优势和劣势. 为什么推荐使用Flexible库来做H5页面的终端设备适配呢?   原理  简单易懂  源码疑问 ...

  3. dpr——设备像素比(device pixel ratio)

    设备像素比 = 物理像素 / 逻辑像素 1.物理像素 显示器上最小的物理显示单元(像素颗粒),在操作系统的调度下,每一个设备像素都有自己的颜色值和亮度值. 例如:手机大小固定,物理像素越高,画面越清晰 ...

  4. 深入理解移动web开发之PPI,Pixel,DevicePixelRatio(转)

    如果你是一个开始接触移动Web开发的前端工程师,那么你或许也遇到了和我曾经遇到的过问题:有太多新的概念需要掌握,太多相似的概念需要区分.没关系,我将用两篇文章的篇幅来解决这些问题.上篇文章关于解释和区 ...

  5. [Canvas] Make Canvas Responsive to Pixel Ratio

    Canvas is great for high performance graphics rendering but by default the results look blocky on ph ...

  6. [Tools] Create your own mobile emulator device by using Chrome dev tool

    Using the New Device Emulation Interface The Device Emulation interface changed a bit with the newer ...

  7. An iOS zero-click radio proximity exploit odyssey

    NOTE: This specific issue was fixed before the launch of Privacy-Preserving Contact Tracing in iOS 1 ...

  8. viewport理解

    viewport预备知识 dpr === dppx dpr:device pixel ratio 设备像素比 dppx:Number of dots per px unit 每像素有多少点 . 1dp ...

  9. 移动端H5页面高清多屏适配方案

    背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范 ...

  10. 移动端Web适配的两种做法思路总结

    看了几篇文章,理一下网易跟淘宝移动端适配的思路,主要是参考 从网易与淘宝的font-size思考前端设计稿与工作流 像素相关概念 物理像素(physical pixel) 一个物理像素是显示器(手机屏 ...

随机推荐

  1. [菜鸟]HTTP 与 HTTPS 的区别

    HTTP 与 HTTPS 的区别 分类 编程技术 基本概念 HTTP(HyperText Transfer Protocol:超文本传输协议)是一种用于分布式.协作式和超媒体信息系统的应用层协议. 简 ...

  2. MySQL基础(二):视图、触发器、函数、事务、存储过程

    一.视图 视图是一个虚拟表(非真实存在),其本质是[根据SQL语句获取动态的数据集,并为其命名],用户使用时只需使用[名称]即可获取结果集,并可以将其当作表来使用. 视图和上一篇学到的临时表搜索类似. ...

  3. 淘宝卖家搜索器V1.6算法注册机。

    该软件的算法非常简单,适合小白练手.(E语言写的)1.OD加载该软件,输入bp MessageBoxA 2.点击注册 3.OD就会中断下来了 4.按ALT+K打开调用堆栈 5.往上翻,就来到算法处了 ...

  4. Spring之注入复杂类型属性

    注入类: package helloworld; import java.util.List; import java.util.Map; import java.util.Properties; p ...

  5. 模拟APP存储空间、内存不足情况下软件正常运行

    1.进行临界测试,手机盘空间存满的条件下应用会有何表现: 方法一:adb shell dd if=/dev/zero of=/mnt/sdcard/bigfile 方法二:哆啦A工具生成文件 2.内存 ...

  6. Git合并的代码 不提交服务器的方法

    使用Git下载代码的时候,常遇到合并的情况,然后再上传的时候,系统就会自动把合并代码的过程也上传,有时候会感觉非常的烦Merge remote-tracking branch 'choose_remo ...

  7. native2ascii -reverse -encoding UTF-8 validation_msg.properties > validation_msg_src.properties

    native2ascii -reverse -encoding UTF-8 validation_msg.properties > validation_msg_src.properties

  8. (转)c# 筛选数组重复项

    转自:http://www.cnblogs.com/zhaoweiting/archive/2009/08/24/1552724.html 第一种方法:public static String[] R ...

  9. 【Revit API】创建相机视角

    在Revit中有一个相机功能可以以相机视角产生一个视图.一开始我在Revit2016的API文档中找关键词Camera,但是没什么收获. 其实这个相机功能的真正核心是创建透视视图:View3D.Cre ...

  10. 【BZOJ1205】[HNOI2005]星际贸易(动态规划)

    [BZOJ1205][HNOI2005]星际贸易(动态规划) 题面 BZOJ 洛谷 题解 第一问就是一个裸\(dp\),因为什么都不用考虑... 所以设\(f[i][j]\)表示当前停靠在第\(i\) ...