在移动端如何选择字体大小和布局的单位,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 改变字体大小
随机推荐
- android键盘弹出头部上移处理
<ScrollView android:id="@+id/top_bar" android:layout_width="fill_parent" andr ...
- Android 插件化
1.介绍 涛哥写的文章 <Android 插件化的 过去 现在 未来> http://kymjs.com/code/2016/05/04/01#rd
- Android 在不同Actitity之间数据传递
本文实现一个简易的人品计算器来实践在不同Actitity之间数据传递 intent的数据传递 从A界面打开B界面 把A界面的数据传递给B界面 1. intent.setData(uri) -- int ...
- iOS远程推送原理及实现过程
➠更多技术干货请戳:听云博客 推送通知,是现在的应用必不可少的功能.那么在 iOS 中,我们是如何实现远程推送的呢?iOS 的远程推送原理又是什么呢?在做 iOS 远程推送时,我们会遇到各种各样的问题 ...
- android 数据存储Ⅱ
本章继续讲解在Android开发中,数据的存储与管理.涉及知识点:SQLite,SwipeRefreshLayout控件刷新. 1.功能需求 练习使用SQLite 做一个登录界面,数据库字段包含用户名 ...
- Newtonsoft.Json 通过 JObject 读取 json对像 超简单
/* json 格式的字符串解析 格式化 { "input": { "size": 193156, "type": "image/ ...
- (转) 一步一步学习ASP.NET 5 (三)- 认识新的Web结构
转发:微软MVP 卢建晖 的文章,希望对大家有帮助.原文:http://blog.csdn.net/kinfey/article/details/44421979 编者语 : 今天微软的两大盛事,早上 ...
- Azure Blob
Blob的概念: Blob是一种为存储二进制数据提供的存储机制,每个Storage Account可以有多个Container,Container中可以存放二进制文件 可以通过REST API来访问, ...
- WebService的介绍概念 收藏
WebService学习总结(二)——WebService相关概念介绍 一.WebService是什么? 1. 基于Web的服务:服务器端整出一些资源让客户端应用访问(获取数据) 2. 一个跨语言.跨 ...
- 让UNION与ORDER BY并存于SQL语句当中
在SQL语句中,UNION关键字多用来将并列的多组查询结果(表)合并成一个结果(表),简单实例如下: SELECT [Id],[Name],[Comment] FROM [Product1] UNIO ...