在移动端如何选择字体大小和布局的单位,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 改变字体大小
随机推荐
- Sharepoint学习笔记—习题系列--70-576习题解析 -(Q19-Q20)
Question 19 You are designing a custom SharePoint 2010 solution package. It will include a feature t ...
- 自定义控件设置属性并实时展现并预览在xib中
关键字: // @IBDesignable:实时看到xib设置后的效果 // @IBInspectable:给xib提供设置属性,可以xib中看到此属性 场景: 自定义一个UITextField,并提 ...
- Android项目实战(二十):浅谈ListView悬浮头部展现效果
先看下效果:需求是 滑动列表 ,其中一部分视图(粉丝数,关注数这一部分)在滑动到顶端的时候不消失,而是停留在整个界面头部. 我们先分析要解决的问题: 1.如何实现列表ListView顶部视图跟随Lis ...
- Facebook开源动画库 POP-小实例
实例1:图片视图跟着手在屏幕上的点改变大小 - (void)viewDidLoad { [super viewDidLoad]; //添加手势 UIPanGestureRecognizer *gest ...
- 【代码笔记】iOS-点击城市中的tableView跳转到旅游景点的tableView,下面会有“显示”更多。
一,效果图. 二,工程图. 三,代码. RootViewController.h #import <UIKit/UIKit.h> @interface RootViewController ...
- SQL Server 使用游标更新数据库中的数据(使用存储过程)
ALTER PROCEDURE [dbo].[POR_CURSOR_FOR_UPDATE] --创建存储过程 AS BEGIN SET nocount ON --忽略行数显示 DECLARE Upda ...
- 0003 64位Oracle11gR2不能运行SQL Developer的解决方法
"应用程序开发"下的"SQL Developer"双击不可用,出现“Windows正在查找SQLDEVELOPER.BAT"的提示,如下图: 搜索博客 ...
- MD5 加密 java代码实现
package com.company.fjf; import java.security.MessageDigest; import java.security.NoSuchAlgorithmExc ...
- 烂泥:php5.6源码安装与apache集成
本文由秀依林枫提供友情赞助,首发于烂泥行天下. apache对php的支持是通过apache的mod_php5模块来支持的,这点与nginx不同.nginx是通过第三方的fastcgi处理器才可以对p ...
- proteus 查找 仿真元件 中英文对照 [持续更新]
CRYSTAL 晶振 CAP 电容 RES 电阻 LED 灯 DIODE 二极管 POWER 电源 GND 接地 SPEAKER 扬声器 AT89C51 51 CPU芯片 三极管 PNP N ...