美文网首页
App 多屏适配

App 多屏适配

作者: Skywalker_Yang | 来源:发表于2017-06-19 12:06 被阅读26次

开发的时候对于UE一般会根据视觉图给一个xxx像素的资源,怎么对应到代码中的dp/sp/px ?

基本概念

  • px : 像素(pixel),设备上的物理像素点。
  • dp : 跟dip是同一个概念,与屏幕物理像素点无关,而是基于屏幕密度的抽象单位,被称作“设备独立像素”,会随着屏幕的密度自动的大小调整。
  • sp : 专用于文字大小的设置,可根据字体大小首选项进行缩放。
  • inch : 英寸,1英寸 = 2.54厘米。
  • dpi : 屏幕像素密度,单位英寸上像素点的数量。
  • 分辨率 : 是指横纵方向上的像素点数,一般是纵向像素 * 横向像素,比如1920 * 1080。
  • 屏幕尺寸 : 屏幕对角线的长度,单位是inch,比如我们平常说的5寸手机,是指手机屏幕的对角线长度为5英寸。

转换关系

尺寸表

level dpi scale resolution
ldpi 120 0.75 320*240
mdpi 160 1 480*320
hdpi 240 1.5 800*480
xhdpi 320 2 1280*720
xxdpi 480 3 1920*1080
xxxdpi 640 4 2560*1440
  • google 官方用词是approximately, 比如ldpi值近似等于120dpi;
  • 分辨率只是比较有代表性的而已,但设备的dpi,还需要根据相应设备的尺寸来计算。同一分辨率,设备尺寸越大,那么dpi就越小,单位英寸上的像素点越稀疏。

换算公式

android.util.TypedValue类提供了一个函数,提供所有单位与px的换算关系。

  • dpi如何计算? dpi,英文dot per inch, 是指每英寸上的像素点个数。计算公式:dpi=√(X²+Y²)/Z (其中 X:纵向的像素个数;Y:横向的像素个数;Z:屏幕尺寸)
  • sacle如何计算? 定义以160dpi作为基准,当前设备的dpi/160dpi = scale值。也就是当设备的dpi为160时1dp=1px.
  • dp与px如何转换? 计算公式:px = dp * (dpi/160), 比如:320dpi的设备,10dp转换为px为 10 *(320/160)px = 20 px,即320dpi下10dp=20px.
  • 1dp到底等于多长呢? 假设设备的dpi=320, 是指320px对应的长度为1英寸, 那么1px=1/320 英寸。再根据前面的公式, 1dp = (320/160) px = 2px。故1dp对应的长度为2 * (1/320)英寸,即1/160英寸。 同理,假设设备的dpi =N,那么1dp = (N/160) px = (N/160) * (1/N) inch = 1/160 inch,再加上前面提到的近似,可以得出结论为1dp约等于1/160英寸

多屏适配

适配原则

  • layout中,最好采用wap_content, fill_parent,dp,可保证在屏幕上有合适的大小;
  • 像素单位使用dp, 文字单位使用sp;
  • 程序代码中不要出现具体的px;
  • 图片应多使用.9.png;
  • 使用百分比布局;

适配方法

  • 查看不同分辨率的设备市场占有率,分析出需要支持的设备分辨率:
  • 对不同大小的屏幕提供不同的layout;
  • 对不同密度的屏幕提供不同的图片;

相关文章

  • App 多屏适配

    开发的时候对于UE一般会根据视觉图给一个xxx像素的资源,怎么对应到代码中的dp/sp/px ? 基本概念 px ...

  • 移动端rem适配

    三:多屏适配布局问题 出处:【原创】移动端高清、多屏适配方案 再谈移动端适配和点5像素的由来 使用相对单位:rem...

  • 多屏适配方案

    本文提供几种常用的多屏适配方案,由于不同公司和产品,适配需求不同,这里没法一一概况完全,仅供参考。 流行多屏适配种...

  • 适配面试

    图片的适配 应用图标 iOS 上传所需基本图片尺寸iOS App图标和启动画面尺寸 页面适配(横竖屏适配) Aut...

  • 安卓适配

    ------刘海屏------屏幕适配 | Android 刘海屏适配总结Android刘海屏适配方案Androi...

  • web多屏适配

    web屏幕适配(一):https://segmentfault.com/a/1190000004524243web...

  • Android 多屏适配

    参考资料 Supporting Multiple Screens A set of six generalized...

  • 关于iOS横竖屏适配

    关于iOS横竖屏适配 关于iOS横竖屏适配

  • 屏幕适配-刘海屏适配

    Android官方9.0刘海屏适配策略 1.如果非全屏模式(有状态栏),则app不受刘海屏影响,刘海屏的高度就是状...

  • android 全面屏适配,最全导航攻略

    Android-APP适配全面屏手机的技术要点 https://windysha.github.io/2018/0...

网友评论

      本文标题:App 多屏适配

      本文链接:https://www.haomeiwen.com/subject/xqjgqxtx.html