zoukankan      html  css  js  c++  java
  • 在移动端如何选择字体大小和布局的单位,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? 

  • 相关阅读:
    前端的一些雕虫小技,从100%和滚动条说起
    这事没完,继续聊spring cloud stream和kafka的这些小事
    简单聊一聊spring cloud stream和kafka的那点事
    是谁,在敲打我窗-CSS雨滴动画效果
    对照谈-官方spring-boot-starter和自定义starter异同分析
    从spring boot发邮件聊到开发的友好性
    抖音抖一抖-SVG和CSS视觉故障艺术小赏
    上位机组态控件PCHMI-PLC地址命名规则
    【C#格式化字符】【C#Chart图表控件】【饼图、柱形图、波形图】
    【PCHMI.DLL】【C#上位机二次开发文档】2021年7月15更新
  • 原文地址:https://www.cnblogs.com/toward-the-sun/p/4884107.html
Copyright © 2011-2022 走看看