[css] ui设计中px、pt、ppi、dpi、dp、sp之间的关系?

[css] ui设计中px、pt、ppi、dpi、dp、sp之间的关系?

QQ20150717160352
做了几个移动端的项目之后,深感移动端尺寸换算的必要性,在此做个总结。

先介绍下各自的定义:

px:pixel,像素,电子屏幕上组成一幅图画或照片的最基本单元
pt: point,点,印刷行业常用单位,等于1/72英寸
ppi: pixel per inch,每英寸像素数,该值越高,则屏幕越细腻
dpi: dot per inch,每英寸多少点,该值越高,则图片越细腻
dp: dip,Density-independent pixel, 是安卓开发用的长度单位,1dp表示在屏幕像素点密度为160ppi时1px长度
sp: scale-independent pixel,安卓开发用的字体大小单位。
以下是换算关系:

一、pt和px
公式一: 1pt= (DPI / 72) px

当photoshop中新建画布的分辨率为72ppi( 即 72dpi时 ), 1pt=1px; 当新建画布分辨率为72*2=144ppi时,1pt=2px

二、ppi和dpi
dpi最初用于衡量打印物上每英寸的点数密度。DPI值越小图片越不精细。当DPI的概念用在计算机屏幕上时,就应称之为ppi。同理: PPI就是计算机屏幕上每英寸可以显示的像素点的数量。因此,在电子屏幕显示中提到的ppi和dpi是一样的,可认为

公式二:dpi=ppi

三、ppi计算方法
ppi是指屏幕上的像素密度,其计算方法为:

公式三: ppi= 屏幕对角线上的像素点数/对角线长度 = √ (屏幕横向像素点^2 + 屏幕纵向像素点^2)/对角线长度

以小米2s为例,该屏幕分辨率为720px*1280px,4.3英寸。则点密度为 √ (720^2 +1280^2) /4.3 = 342ppi。

四、px和dp
dp为安卓开发时的长度单位,根据不同的屏幕分辨率,与px有不同的对应关系。

安卓端屏幕大小各不相同,根据其像素密度,分为以下几种规格:

QQ20150717160404

1dp定义为屏幕密度值为160ppi时的1px,即,在mdpi时,1dp = 1px。 以mdpi为标准,这些屏幕的密度值比为:ldpi : mdpi : hdpi : xhdpi : xxhdpi = 0.75 : 1 : 1.5 : 2 : 3;即,在xhdpi的密度下,1dp=2px;在hdpi情况下,1dp=1.5px。其他类推。

公式四: 1dp=(屏幕ppi/ 160)px

以WVGA屏为例,该屏幕为480px*800px,按3.8寸屏算,点密度 √ (480^2 + 800^2) / 3.8 = 245,约等于240,对应于hdpi屏幕,所以该屏幕1dp=1.5px

五、dp和sp
dp和sp都是安卓的开发单位,dp是长度单位,sp是字体单位。sp与dp类似,但是可以根据用户的字体大小首选项进行缩放。Android系统允许用户自定义文字尺寸大小(小、正常、大、超大等等),

公式五:当文字尺寸是“正常”时1sp=1dp,而当文字尺寸是“大”或“超大”时,1sp>1dp。

一般情况下可认为sp=dp。

总结:由于做设计时以xhdpi为模板,xhdpi条件下,1dp=2px。若新建画布时,将画布分辨率设为144ppi,则1pt=2px=1dp。此时,即可将pt等同于dp。标注长度的时候,将长度像素除以2即为dp值。

PS:在photoshop cc中切图时,可直接在.png 图片图层名称前加上200%获得2倍大小的图,其他比例的切图以此类推。输出的两倍图不模糊的前提是,该图是photoshop中用形状工具画出来的未被栅格化的图形,而不是已被栅格化的图层或外部导入的图片。

android获取屏幕尺寸、密度
有些时候,我们需要获取Android手机或Pad的屏幕的物理尺寸,以便于界面的设计或是其他功能的实现。下面就介绍讲一讲如何获取屏幕的物理尺寸:
从网上找过不少资料,发现获取屏幕尺寸并不是很复杂的编程操作,下面的代码即可获取屏幕的尺寸。
在一个Activity的onCreate方法中,写入如下代码:
DisplayMetrics metric = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(metric);
int width = metric.widthPixels; // 屏幕宽度(像素)
int height = metric.heightPixels; // 屏幕高度(像素)
float density = metric.density; // 屏幕密度(0.75 / 1.0 / 1.5)
int densityDpi = metric.densityDpi; // 屏幕密度DPI(120 / 160 / 240)
但是,需要注意的是,在一个低密度的小屏手机上,仅靠上面的代码是不能获取正确的尺寸的。比如说,一部240x320像素的低密度手机,如果运行上述代码,获取到的屏幕尺寸是320x427。因此,研究之后发现,若没有设定多分辨率支持的话,Android系统会将240x320的低密度(120)尺寸转换为中等密度(160)对应的尺寸,这样的话就大大影响了程序的编码。所以,需要在工程的AndroidManifest.xml文件中,加入supports-screens节点,具体的内容如下:

这样的话,当前的Android程序就支持了多种分辨率,那么就可以得到正确的物理尺寸了。

个人简介

我是歌谣,欢迎和大家一起交流前后端知识。放弃很容易,
但坚持一定很酷。欢迎大家一起讨论

主目录

与歌谣一起通关前端面试题

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/413438.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

SQL多列查询最大值

直接从某一列查询出最大值或最小值很容易,通过group by字句对合适的列进行聚合操作,再使用max()/min()聚合函数就可以求出。 样本数据如下: key_idxyzA123B552C471D338求查询每个key的最大值,展示结果如下: key_idcolA…

CSS之浮动模型

浮动模型又叫流模型,什么是float(浮动) 最早是为了适应报纸的排版,文字环绕图片的效果,后来经过使用和研究发展出一系列复杂的用法。 CSS 的 Float(浮动),会使元素向左或向右移动&…

工作336:uni-ele-el-table修改宽度问题

<el-table-columnfixed"right"header-align"center"label"操作"width"200px">

java 递归调整为队列

如果递归的是深而不广的树时&#xff0c;应该使用队列来优化递归&#xff1b;如果递归是广而不深的树的时候&#xff0c;就应该用递归来优化队列。 https://blog.csdn.net/pseudonym_/article/details/71600084?utm_sourceitdadao&utm_mediumreferral转载于:https://www.c…

工作337:pc-ele-ment联查问题

<grid-radiochange"ListRuery"v-model"query.platform":border"true":options"platform_category"/><!--query.platform--></el-form-item><el-form-item label"平台选择"><!-- <el-checkbo…

html中内联元素和块级元素的区别(整理版)

块级元素和内联元素的主要区别 块级元素 内联元素&#xff08;即行内元素&#xff09; 总是在新行上开始&#xff0c;独占一行默认情况下&#xff0c;宽度自动填满其父元素 相邻的行内元素会排列再同一行里&#xff0c;直到一行排不下&#xff0c;才会换行&#xff0c;宽度随…

工作338:pc重置筛选条件

this.query{}console.log(this)getAction("/account/list",{query:{platform_channel: this.query.platrorm_channel,platform_category:this.query.platform,department_id:this.query.department,}}).then(res>{console.log(res)this.accountListres.data})运行…

Python---通配符的使用

苹果单价 9.00 元&#xff0f;斤&#xff0c;购买了 5.00 斤&#xff0c;需要支付 45.00 元 在 Python 中可以使用 print 函数将信息输出到控制台如果希望输出文字信息的同时&#xff0c;一起输出 数据&#xff0c;就需要使用到 格式化操作符% 被称为 格式化操作符&#xff0c;…

工作339:pc父组件通过props传值给子组件,如何避免子组件改变props的属性值报错问题

</el-form><div><!--子代方法有一个传值传向父级 onselect去接收这个值--><select-account :data1.sync"accountList" :checkedData.sync"checkedData1" seletct"onSelect" /></div><div style"clear: bo…

H5新增的标签和属性

声明 Web 世界中存在许多不同的文档。只有了解文档的类型&#xff0c;浏览器才能正确地显示文档。 HTML 也有多个不同的版本&#xff0c;只有完全明白页面中使用的确切 HTML 版本&#xff0c;浏览器才能完全正确地显示出 HTML 页面。这就是 <!DOCTYPE> 的用处。 <!…

Qt错误汇总

1-工程文件不能包含中文路径。 2-转载于:https://www.cnblogs.com/chdfelix/p/9548686.html

css之文本溢出处理 | 背景图片处理

文本溢出处理 单行文本用缩略符号——text-overflow:ellipsis; 多行文本做截断策略——line-height * 行数 height;text-overflow:hidden; 背景图片处理相关属性 1、background&#xff1a;设置对象的背景样式&#xff0c;是一个复合属性&#xff0c;可以用于同时设置背景…

hdu 2196 computer

hdu 2196 题意 给出一棵树&#xff0c;求出树上每一个点在树上走一条简单路径所能走的最长距离。 解法 说起来&#xff0c;这是我今天1A的第一题 我们设\(up[i]\) 表示从这个点向上走到某个点又向下走的最长距离 设 \(down[i][0]\) 表示从这个点出发向他的子树所能走到的最大距…

CSS之盒模型

怎么理解盒子模型&#xff1f; 盒子模型是样式表&#xff08;css&#xff09;控制页面的很重要的概念。如果理解了盒子模型和其中每个元素的用法&#xff0c;才能熟练使用css的定位方法和技巧。所有的页面的元素都可以看成是一个盒子&#xff0c;占据一定的页面空间。占据的空…

[css] 使用css画个钟表的时间刻度

[css] 使用css画个钟表的时间刻度 写一下思路&#xff0c;先定义一个钟表的大小位置&#xff0c;用absolute,从1点到12点用ul,li。每个li可以用nth-child(对应第几个)来控制位置&#xff0c;角度用transform&#xff0c;然后分钟的刻度也是照样子分别控制位置&#xff0c;要用…

BZOJ 2301 - Problem b(莫比乌斯反演+容斥)

题目链接 https://cn.vjudge.net/problem/HYSBZ-2301 【题意】 对于给出的 n 个询问&#xff0c;每次求有多少个数对(x,y)(x,y) &#xff0c;满足 a≤x≤b&#xff0c;c≤y≤da≤x≤b&#xff0c;c≤y≤d &#xff0c;且 gcd(x,y)k&#xff0c;gcd(x,y)gcd(x,y)k&#xff0c;g…

前端两个经典bug

1、margin塌陷bug <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><meta http-equiv"X-UA-Compatible&qu…

[css] 请使用css3实现图片的平滑转换

[css] 请使用css3实现图片的平滑转换 以全局监听的方式通过 a 标签的描点进行 view 动态切换页面&#xff0c;只要把 a 标签带有 id 的 href 属性的值指到锚点&#xff0c;用 CSS3 的动画进行切换页面.个人简介 我是歌谣&#xff0c;欢迎和大家一起交流前后端知识。放弃很容易…

== vs === in Javascript

本文来自网易云社区作者&#xff1a;魏文庆如果你只想知道与的区别&#xff0c;请直接看总结&#xff0c;当然我更希望您能耐心看完全文。Javascript中用于相等比较的操作符有两个和。我们通常称为“等于”&#xff0c;而我们通常称为“严格等于”。本文将对和做详细说明。相对…

[css] 使用纯css能否监控到用户的一些信息?怎么实现?

[css] 使用纯css能否监控到用户的一些信息&#xff1f;怎么实现&#xff1f; 利用:active 伪类实现监控用户的点击 .button-1:active::after {content: url(./pixel.gif?actionclick&idbutton1);display: none; } .button-2:active::after {content: url(./pixel.gif?ac…