深入浅出之移动端屏幕适配(1)

说到移动端:可以根据开发技术分,也可以根据操作系统来分,今天重点不是这个,是讲下使用CSS与Android如何进行屏幕适配。

1.先来了解几个概念:CSS中的px,em,rem分别是啥东西?

px:像素,如果像素要换算成物理长度,需要得到dpi(每英寸像素数)

em:相对长度单位,大小相对于父级节点来说,

rem:是CSS3新增的一个相对单位,这个单位引起了广泛关注。相对于根元素<html>,关于兼容性的问题,除了ie8及更早的版本,其他浏览器均支持

 

2.Android:也有类似的单位,dp(dip),sp,px,了解前面几个单位之前先来了解下:

分辨率:480*800 ,指的是x与y两个方向上的像素点的数量。

屏幕尺寸:一般听到说手机4.7英寸或者5.2英寸,屏幕对角线的长度,这里还要说明下:1英寸(in)=2.54厘米(cm),因此上面的4.7*2.54=11.93cm。

屏幕比例:对角线长度固定但长宽的长度是不确定的,因此有不同的比例。

下面进入正题:

px:像素

dp:基于密度(density)的相对单位,与设备无关像素

sp:与像素无关单位,用于字体大小

density:比例值。

对于第二个应该是有疑问的?‘密度‘是什么?它与dp的关系是怎样的?

首先这个density‘密度‘的意思与物理中的密度有点不一样的,它是指一个比例值,计算方式为 DPI / (160像素/英寸) 。先讲后面的160像素/英寸,android默认的只有3个dpi,low、medium和high,对应 120、160、240,如果没有特别设置,所有的dpi都会被算成这3个,具体可以参考下这个帖子,http://android.tgbus.com/Android/tutorial/201103/347176.shtml,其中的default就是160。

DPI是怎么计算的?其实根据上面讲的几点:屏幕分辨率480*800,屏幕尺寸4英寸,已经可以计算了,(480/4^2)+(800/4)^2开平方根;

那么density的值应该为233/160=1.46

 px要怎么算?px=dp*density;结果是实际的像素点,由于density随着屏幕分辨率改变的比例值因此像素点会随之改变。

下面一个部分直接引用:

为啥 标准dpi = 160

  (1)Android Design [1] 里把主流设备的 dpi 归成了四个档次,120 dpi、160 dpi、240 dpi、320 dpi

  实际开发当中,我们经常需要对这几个尺寸进行相互转换(比如先在某个分辨率下完成设计,然后缩放到其他尺寸微调后输出),一般按照 dpi 之间的比例即 2:1.5:1:0.75   来给界面中的元素来进行尺寸定义。

  也就是说如果以 160 dpi 作为基准的话,只要尺寸的 DP 是 4 的公倍数,XHDPI 下乘以 2,HDPI 下乘以 1.5,LDPI 下乘以 0.75 即可满足所有尺寸下都是整数 pixel 。

  但假设以 240 dpi 作为标准,那需要 DP 是 3 的公倍数,XHDPI 下乘以 1.333,MDPI 下乘以 0.666 ,LDPI 下除以 2

  而以 LDPI 和 XHDPI 为基准就更复杂了,所以选择 160 dpi

     (2)这个在Google的官方文档中有给出了解释,因为第一款Android设备(HTC的T-Mobile G1)是属于160dpi的。

参考:http://www.cnblogs.com/yaozhongxiao/archive/2014/07/14/3842908.html

原文地址:https://www.cnblogs.com/lmf-techniques/p/6763263.html