一 ppi,dpr,dip,分辨率,屏幕尺寸,设备物理像素,设备独立像素 分辨率:1920px*1080px 在这个设备上纵向上有 1920个像素点(色块)... 屏幕尺寸:5英寸(in) = 5*2.54(cm) 指的是在这个屏幕上对角线的长度使用英寸单位 这个值是每个设备固定不变的 像素密度ppi: ppi和dpi 指的是一个设备上每英寸长度上有多少个像素点 ppi = 对角线上的像素数量/尺寸 设备像素比dpr: 指的是一个设备上的 物理像素和独立像素的比值 dpr = 设备像素/设备独立…

什么是物理像素.虚拟像素.逻辑像素.设备像素,什么又是 PPI, DPI, DPR 和 DIP?有关 viewport 以及苹果安卓设备上的页面呈现为什么效果不一样,又有哪些方法去改变和统一呢?网络上有很多资源对这些知识点进行了介绍,但是查看之后我发现大都比较零散且阅读顺序容易让新人疑惑,在这里我尝试根据几篇文章糅合了一个循序渐进的知识点整理.在正式开始介绍之前,我们先集中看看几个基本概念. 设备像素(device pixel, dp): 又称为物理像素.指设备能控制显示的最小物理单位,意指显示…

1.PX(CSS pixels) 1.1 定义 虚拟像素,可以理解为“直觉”像素,CSS和JS使用的抽象单位,浏览器内的一切长度都是以CSS像素为单位的,CSS像素的单位是px. 1.2 注意 在CSS规范中,长度单位可以分为两类,绝对(absolute)单位以及相对(relative)单位.px是一个相对单位,相对的是设备像素(device pixel). 在同样一个设备上,每1个CSS像素所代表的物理像素是可以变化的(即CSS像素的第一方面的相对性); 在不同的设备之间,每1个CSS像素所代…

Dpr: Dpr的全称(Device pixel ratio)像素设备比例:就是说每个设备像素上占有的css位像素的个数 苹果手机常见的设备像素比:1.0安卓 iPhone2.0  3.0 如果是1.0 设计稿的宽度是多少,我们就写多少,如果是2.0 我们所写的宽高,字体,等等都要是设计稿的一半(为了适配) ppi:是设备像素密度(设备每个单元格,所占有的像素的数目)密度越大,图片越高清: 设备像素(物理像素)iPhone5以下,物理像素320,iPhone6 物理像素375 iPhone pl…

device Pixel & CSS Pixel 物理像素指显示设备上的物理像素点,比如HTC G11宽是480px,这的480是用物理像素衡量的. CSS像素的话则指我们写页面时理解的那个像素单位.可以理解为是设备自己做了一层缩放,让2个物理像素代表一个我们css里说的像素,也就是dp(设备独立像素)的概念.行业内有个约定俗成的规范,即一般这个数值是320. 有的很高密度的手机略作了调整. 想知道设备的物理像素的话,一般去取 screen.width 就可以. 但苹果只会给你dp的数值,也就是…

一 基本概念 1. dpi (dots per inch)每英寸多少点:ppi( Pixel per inch),每英寸像素数.针对显示器的设计时,dpi=ppi. 2. dip (device independent pixels)设备独立像素,不同设备有不同的显示效果,这个和设备硬件有关,不依赖像素. 3. dp (Density-independent pixel),一种基于屏幕密度的抽象单位.在每英寸160点的显示器上,1dp = 1px. 4. px (pixels)像素,就是屏幕上实…

在某公司做了一次分享,主题是‘移动端和pc端开发的区别’.可以说,这总结的原版就是在这样的契机下完成的.因为我只是习惯了移动端就应该那么写(设置viewport等),要是让我给大家分条讲下所以然,还真有难度,毕竟自己还不理解,看了几十篇文章,捋了好久,思路也不那么乱了,总结了一下,完成ppt,跟大家分享了一下,完了之后感觉自己进步很大.到如今时隔9个月了,今天拿出来当初的ppt回顾了一番,决定再发此文,以跟大家分享.如若有误,欢迎指正-…

这篇文章能让你了解到什么是分辨率.dpr.dip.ppi (dpi相当于ppi,dpi用点表示物理像素密度,ppi是逻辑像素密度) 首先从最简单的ppi开始: 一部手机,有大有小,怎么知道手机的大小用尺子量一量即可,有两条边量哪一条呢?勾股定理告诉我们斜边越大,面积就越大,量斜边没跑了.量的单位可不是cm,而是英寸.1英寸= 2.54cm,这个相信看过<新华字典>或<现代汉语词典>的人都知道,上面附有计量单位表. 嘿嘿,又引出了一个物理像素的概念:物理像素就是分辨率的那两个数字,两…

什么是Viewport 手机浏览器是把页面放在一个虚拟的“窗口”(viewport)中,通常这个虚拟的“窗口”(viewport)比屏幕宽,这样就不用把每个网页挤到很小的窗口中(这样会破坏没有针对手机浏览器优化的网页的布局),用户可以通过平移和缩放来看网页的不同部分.移动版的 Safari 浏览器最新引进了 viewport 这个 meta tag,让网页开发者来控制 viewport 的大小和缩放,其他手机浏览器也基本支持. Viewport 基础 一个常用的针对移动网页优化过的页面的 vie…

引言 按照pc尺寸做好的网页,在手机端打开,看起来像是pc的缩小版,东西都在只是字太小都看不清了,有什么办法放大呢? 于是去google一下,发现,贴了这么一行代码就轻松解决了: <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0"/> 为什么这行代码能让字看起…