移动开发中“单位”的那些事儿

在移动开发中我们常常会考虑度量单位的问题,在传统pc的web开发中用的比较多的是px(css像素),在Android开发中一般则用dp、sp、px(物理像素)等,而移动web开发中同样也是用px(css像素)做单位,通常会结合viewport进行缩放。本篇blog就梳理一下在移动开发中用到的各种单位以及他们之间的联系和区别。

绝对单位和相对单位

如题,首先来看看什么是绝对单位和相对单位:

绝对单位:即值在任何环境下都不会变化的常量,如我们日常生活中经常会用到的in(inch英寸)、cm(厘米)、mm(毫米)、pt(磅,1磅等于1/72英寸)等,pt常用于标准印刷,这些绝对长度单位在界面设置中很少用到,仅作了解。

相对单位:主要就是我们最熟悉的px,之所以是相对的因为它会随着设备和环境的变化而变化,后面再具体说明,还包括在css中常用到的em、rem等。

屏幕尺寸、分辨率与像素密度

这是第二个话题,首先来看看屏幕尺寸,屏幕尺寸实际指的是矩形屏幕对角线的长度,单位是英寸(in),1英寸=2.54厘米,例如常见的笔记本电脑尺寸是14英寸,而在手机中大屏幕普遍是5.5英寸以上,而小屏手机的代表iphone4s则是3.5英寸。

接下来看一下分辨率,屏幕分辨率指的是横纵向上的像素点数,单位是px,1px=1个像素点,一般以纵向像素*横向像素来表示完整分辨率,例如魅族最新的旗舰手机pro6的分辨率就是:1920*1080,也就意味着pro6的屏幕是由2073600个像素点组成的,也就是说即使屏幕尺寸一样,而像素不一样的话(例如:iphone3和iphone4都是3.5英寸,而前者的分辨率是480*320,后者则是960*640),所能容纳的像素点也是不一样的,这一点就充分说明了android开发中控件单位不能用px的原因,比如将一个TextView设置为500px*500px,在相同的屏幕尺寸情况下,分辨率为480*320的设备上的占屏比要比960*640的设备上的占屏比大一倍,我们来举个例子看看。

首先准备两台android模拟器,一个是Google Nexus 4,4.7寸屏,分辨率为1280*768:

这里写图片描述

另一台是HTC One XL,为了演示我将它的分辨率修改为1920*1080 - 480dpi,这样刚好能保证屏幕尺寸也为4.7,而且分辨率也高Nexus 4很多(关于为什么修改成这个分辨率以及dpi的概念稍后再说):

这里写图片描述

接下来双开这两台模拟器跑一个简单的android程序,仅仅是在一个线性布局中放了一个TextView,并将它的width和height都设置为500px,并设置了背景色方便观察效果:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <TextView android:layout_width="500px" android:layout_height="500px" android:text="abc" android:background="#FFFF00" /> </LinearLayout>

接下来看一下这两台虚拟机的运行效果:

这里写图片描述

如上图,左边是高分辨率的HTC(1920*1080),右边是低分辨率的Nexus(1280*768),它们的尺寸都是4.7英寸,但通过观察发现明显左边的TextView占屏面积小,而又边的占屏面积大的多,这就是android中不能用px做单位的原因,好了,通过这个问题我们又引入了一个新的概念,就是屏幕像素密度(pixels per inch),也就是ppi/dpi

首先看一下概念,屏幕像素密度指的是屏幕上每英寸可以显示的像素点的数量,屏幕像素密度和屏幕尺寸以及屏幕分辨率有关,在单一变化条件下,屏幕尺寸越小、分辨率越高,则像素密度就越大。计算密度的公式是:屏幕对角线分辨率/屏幕尺寸。以上面的两台虚拟机设备为例,4.7寸的HTC One XL的屏幕分辨率是1920*1080,那么它的屏幕像素密度就是:

x=1920

移动开发中“单位”的那些事儿

2

移动开发中“单位”的那些事儿

+1080

移动开发中“单位”的那些事儿

2

移动开发中“单位”的那些事儿

移动开发中“单位”的那些事儿

移动开发中“单位”的那些事儿

移动开发中“单位”的那些事儿

移动开发中“单位”的那些事儿

移动开发中“单位”的那些事儿

移动开发中“单位”的那些事儿

移动开发中“单位”的那些事儿

移动开发中“单位”的那些事儿

移动开发中“单位”的那些事儿

移动开发中“单位”的那些事儿

移动开发中“单位”的那些事儿

移动开发中“单位”的那些事儿

移动开发中“单位”的那些事儿

移动开发中“单位”的那些事儿

移动开发中“单位”的那些事儿

4.7

移动开发中“单位”的那些事儿

移动开发中“单位”的那些事儿

移动开发中“单位”的那些事儿

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/375f833c7a9b6ad1e559473101f65f34.html