深入浅出之移动端屏幕适配(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的。

参考:dpi 、 dip 、分辨率、屏幕尺寸、px、density 关系以及换算

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏知识分享

3-关于"小五物联"的功能介绍(添加波形图,Achartengine)

25530
来自专栏极客猴

Python 绘图,我只用 Matplotlib(二)

上篇文章,我们了解到 Matplotlib 是一个风格类似 Matlab 的基于 Python 的绘图库。它提供了一整套和matlab相似的命令API,十分适合...

16310
来自专栏埋名

CSS样式clip-path绘制图形裁剪图片

发现clip-path绘制图形的网站 http://bennettfeely.com/clippy/ 专门介绍clip-path的使用,几乎任何形状都可以做出来...

28120
来自专栏数据小魔方

帕累托图(Pareto Chart)

今天要跟大家分享的图表是帕累托图! ▽▼▽ 这种图表类似于之前曾分享过的直方图,但是又比直方图所能展现的数据信息更多,由一个降序排列的柱形图和一个升序排列的带数...

41350
来自专栏前端知识分享

第154天:canvas基础(一)

​ <canvas> 是 HTML5 新增的,一个可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML 元素。它可以用来制作照片集或者制作简单(...

10020
来自专栏数据小魔方

sparklines迷你图系列7——Comparision(+/-Variance)。

今天跟大家分享sparklines迷你图系列的第七篇——Comparision(+/-Variance)。 该图表用于表现指标增长率波动情况,波动范围-100%...

27350
来自专栏coding for love

CSS进阶12-网格布局 Grid Layout

(注1:如果有问题欢迎留言探讨,一起学习!转载请注明出处,喜欢可以点个赞哦!) (注2:更多内容请查看我的目录。)

10320
来自专栏IMWeb前端团队

移动端圆环进度动画方案(透明背景-透明度圆环-css3版)

本文作者:IMWeb 张颖 原文出处:IMWeb社区 未经同意,禁止转载 适逢元旦假期,妹子逛街吃火锅看电影陪女朋友之际,写出来的文章难免画风略微粗糙...

21480
来自专栏数据小魔方

多度量的(堆积)不等宽柱形图

今天要跟大家介绍的图表是多度量的不等宽柱形图! ▽▼▽ 这种多度量的不等宽柱形图,在制作技巧上,与之前讲过的两篇不等宽柱形图有异曲同工之妙,但是在数据表达与展示...

45360
来自专栏菩提树下的杨过

Flash/Flex学习笔记(25):摩擦力与屏幕环绕

摩擦力: 假如一个物体在某个方向上沿直线运行,摩擦力会使该方向上的速度越来越小,直到停止。 ? 上图示意了该过程,物体以moveAngle角度正向运动,最终的...

20760

扫码关注云+社区

领取腾讯云代金券