在移动端如何选择字体大小和布局的单位,px或dp?
android开发中,文字大小的单位是sp,非文字的尺寸单位用dp,但是我们在设计稿用的单位是px。这些单位如何换算,是设计师、开发者需要了解的关键.
简单理解的话,px(像素)是我们UI设计师在PS里使用的,同时也是手机屏幕上所显示的,dp是开发写layout的时候使用的尺寸单位
为什么要把sp和dp代替px?原因是他们不会因为ppi的变化而变化,在相同物理尺寸和不同ppi下,他们呈现的高度大小是相同。也就是说更接近物理呈现,而px则不行
为了适应多分辨率的手机,理想的方式是为每种分辨率做一套设计稿,包括所用到的icon、设计稿标注等。但在实际开发中,这种方法耗时耗力。所以通常会选择折中的方法
方法一:在标准基础上(比如xhdpi)开始,然后放大或缩小,以适应到其他尺寸。不足之处是,对于更高分辨率的手机,图标被放大后会导致质量不高。
方法二:以最高分辨率为基准设计,然后缩小适应到所需的小分辨率上。缺点是,图标等若都最大尺寸,加载时速度慢且耗费流量较多,对于小分辨率的用户也不够好
PPI = Pixels per inch,每英寸上的像素数,即 "像素密度"
- xhdpi: 2.0
- hdpi: 1.5
- mdpi: 1.0 (baseline)
- ldpi: 0.75
drawable-ldpi、drawable-mdpi、drawable-hdpi 精度分别为低、中(android默认)、高。
对应的图片大小为:36x36、48x48、72x72。
xxhdpi: 144*144
xhdpi:96*96
hdpi:72*72
mdpi:48*48
ldpi:36*36
dp是虚拟像素,在不同的像素密度的设备上会自动适配,比如:
在320x480分辨率,像素密度为160,1dp=1px
在480x800分辨率,像素密度为240,1dp=1.5px
计算公式:1dp*像素密度/160 = 实际像素数
drawable- hdpi、drawable- mdpi、drawable-ldpi的区别:
(1)drawable-hdpi里面存放高分辨率的图片,如WVGA (480x800),FWVGA (480x854)
(2)drawable-mdpi里面存放中等分辨率的图片,如HVGA (320x480)
(3)drawable-ldpi里面存放低分辨率的图片,如QVGA (240x320)
系统会根据机器的分辨率来分别到这几个文件夹里面去找对应的图片
ppi的运算方式是:
PPI = √(长度像素数² + 宽度像素数²) / 屏幕对角线英寸数
dp:Density-independent pixels,以160PPI屏幕为标准,则1dp=1px,
dp和px的换算公式 :
dp*ppi/160 = px。比如1dp x 320ppi/160 = 2px。
sp:Scale-independent pixels,它是安卓的字体单位,以160PPI屏幕为标准,当字体大小为 100%时, 1sp=1px。
sp 与 px 的换算公式:sp*ppi/160 = px
总结得出:
px = dp*ppi/160
dp = px / (ppi / 160)
px = sp*ppi/160
sp = px / (ppi / 160)
dp = sp?
在移动端如何选择字体大小和布局的单位,px或dp?的更多相关文章
- fontresize 移动端的手机字体 大小设置
这段js 需要置于页面上端 也就是 需要先加载js然后加载页面 (这段js是原生js而且比较短小 基本对页面加载速度无影响) FontResize : function(maxWidth){ (fun ...
- select下拉框选择字体大小
效果: 结合Bootstrap.jQuery和ES6字符串模板与箭头函数使用JavaScript DOM操作动态添加option,随着option:selected选中的字号而改变相应的字体大小 代码 ...
- CSS系列:长度单位&字体大小的关系em rem px
em是相对长度单位.相对于当前对象内文本的字体尺寸.如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸. 任意浏览器的默认字体高都是16px.所有未经调整的浏览器都符合: 1em=1 ...
- CSS——字体大小最常用的单位
px (像素): 将像素的值赋予给你的文本.这是一个绝对单位, 它导致了在任何情况下,页面上的文本所计算出来的像素值都是一样的. ems: 1em 等于我们设计的当前元素的父元素上设置的字体大小 (更 ...
- 小胖说事14--------IOS字体大小,字号的问题 PX转化为UIFont
PX和Font之间相互转换公示表: 计算公式为:font=(像素PX)/(96/72).
- 移动端rem布局,用户调整手机字体大小或浏览器字体大小后导致页面布局出错问题
一.用户修改手机字体设置大小,影响App里打开的web页面. 手机字体设置大小,影响App的页面.Android的可以通过webview配置webview.getSettings().setTextZ ...
- 【MFC】MFC改变对话框中静态文本的字体大小
MFC改变对话框中静态文本的字体大小 2010/08/09 11:30 VC的对话框字体设置对所有控件都有效,你不能单独地改变某个静态文本的字体.对于你的问题,需要首先用CreateFont来建立一个 ...
- vs mfc 静态文本 改变字体大小
VC的对话框字体设置对所有控件都有效,你不能单独地改变某个静态文本的字体.对于你的问题,需要首先用CreateFont来建立一个字体对象,然后调用控件的SetFont,就可以了. 例子: 1.改静态文 ...
- eclipse 改变字体大小
随机推荐
- ViewPager的使用小技巧
1.在ViewPager中默认加载当前屏幕上的界面和左右相邻界面的数据从而实现页面滑动的快速切换.可以通过调用setOffscreenPageLimit(int)方法,定制预加载相邻页面的数目. 2. ...
- switch-枚举
在swift中,如果switch的枚举,可以不写default,因为系统知道有多少种情况,如果不是枚举,必须要写default enum WBComposeToolBarButtonType:Int ...
- Ubuntu 安装Samba服务器
1.安装 sudo apt-get update sudo apt-get install samba (如果出现库依赖问题可用命令sudo apt-get install samba libwbcl ...
- Android 隐式意图和显示意图的使用场景
本文实现一个隐式意图的应用,激活短信应用 public void click4(View view) { Intent intent = new Intent(); intent.setAction( ...
- iOS UITableViewController出现crash
Terminating app due to uncaught exception 'NSInternalInconsistencyException', reason: 'attempt to de ...
- IOS客户端Coding项目记录(六)
1:获取某一行的坐标 UITableViewCell *cell = [_myTableView cellForRowAtIndexPath:[NSIndexPath indexPathForRow: ...
- Facebook开源动画库 POP-POPSpringAnimation运用
POPSpringAnimation也许是大多数人使用POP的理由 其提供一个类似弹簧一般的动画效果:实例源代码已经上传至gitHub,地址:https://github.com/wujunyang/ ...
- Mac下修改Hosts文件工具——Gas Mask
这段时间在做公司APP的项目,看到公司开发IOS的同事和我这边联调程序时,经常需要手动修改hosts文件,比较麻烦. 在公司忙,没有来及找,给同事推荐了我当时知道的一个切换hosts文件的工具:sma ...
- JavaScript Patterns 5.2 Declaring Dependencies
It’s a good idea to declare the modules your code relies on at the top of your function or module. T ...
- C# 重载运算符
如果你想让自己定义的类型可以用运算符进行运算,那么可以通过重载运算符来实现: 示例: class Salary { public int RMB { get; set; } public static ...