实际开发中经常被这几个概念搞得晕头转向,虽然知道布局用dp,字体大小用sp,但确不知其所以然,今天特地整理了一下资料,分享出来。

概念解释

  1. px : pixel ,一个像素点 ,如手机分辨率320*480表示宽有320像素,高有480像素。
  2. in :Inches ,英寸,屏幕物理尺寸大小, 1 英寸 = 2.54 厘米。屏幕大小是手机对角线的物理尺寸,以英寸(inch)为单位。比如某某手机为“5寸大屏手机”,就是指对角线的尺寸,5寸×2.54厘米/寸=12.7厘米。
  3. ppi :pixels per inch,图像分辨率 (在图像中,每英寸所包含的像素数目)。
    dpi : dots per inch, 打印分辨率 (每英寸所能打印的点数,即打印精度),实际移动应用中,dpi和ppi一样的。所谓的屏幕密度指的就是这个。

    dpi = ppi = √(长度像素数² + 宽度像素数²) / 屏幕对角线英寸数 = 对角线像素数/屏幕对角线英寸数

    假如我们知道一部手机的分辨率是1080×1920,屏幕大小是5英寸,根据公式计算结果是440dpi。

  4. dp=dip(Density-independent pixels),基于屏幕物理分辨率一个抽象的单位,用于说明与密度无关的尺寸和位置。

    px = dp*ppi/160
    dp = px*160/ppi

    从公式可以看出,公式的由来是已160dpi的屏幕为基准,此时该屏幕1dp=1px。如果320dpi的屏幕上,公式推导可得1dp = 2px。
    dp更类似一个物理尺寸,比如一张宽和高均为100dp的图片在320×480和480×800的手机上“看起来”一样大。而实际上,它们的像素值并不一样。dp正是这样一个尺寸,不管这个屏幕的密度是多少,屏幕上相同dp大小的元素看起来始终差不多大。

  5. sp :Scale-independent Pixels - 和dp单位很像,不过sp可以通过用户设置的字体大小而缩放. 为了能够自适应屏幕密度和用户的设置,建议设置字体大小时候用sp.当安卓系统字号设为“普通”时,sp=dp.

由以上概念以及公式可知,求dp或sp的过程为,分辨率+屏幕对角线英寸→dpi/ppi→dp/sp

Android系统定义的dpi

实际dpi(公式计算出来的结果)和Android系统dpi

假如分辨率1080×1920,那么5英寸计算出来的是440,4.5英寸dpi是490。如此看来,屏幕密度将会出现很多数值,呈现严重的碎片化。而密度又是安卓屏幕将界面进行缩放显示的依据,那么安卓是如何适配这么多屏幕的呢?
其实,每部安卓手机屏幕都有一个初始的固定dpi值,这些数值是120、160、240、320、480,可以看作为“系统密度”。安卓对界面元素进行缩放的比例依据正是系统定义的dpi值,而不是实际计算出来的dpi。

系统定义dpi图解

密度 ldpi mdpi hdpi xhdpi xxhdpi
代表分辨率 240x320 320x480 480x800 720x1280 1080x1920
密度值(dpi) 120 160 240 320 480
比例 3 4 6 8 12
mdpi基准比例 0.75 1 1.5 2 3

Android系统dpi关系表格,以mdpi(160)为基准

不同屏幕分辨率下的dp差异,布局文件配置

不同分辨率对应的dp
如果想消除这些比例差异,可以通过添加布局文件来实现。一般情况下,布局文件放在layout文件夹中,如果要单独对360dp的屏幕进行调整,你可以单做做一个布局文件放在layout-w360dp中;不过,最好是默认针对360dp的屏幕布局(较为主流),然后对320dp的屏幕单独布局,将布局文件放到layout-w320dp中;如果你想对某个特殊的分辨率进行调整,那么你可以将布局文件放在标有分辨率的文件夹中,如layout-854×480。
一般APP的适配主要以宽度为准,高度不作限制,如果超出本机设备屏幕高度则采用内容滚动(顶部的导航栏与底部的标签栏固定不变)。

图片建议提供一套drawable-xhdpi

针对不同分辨率不同屏幕尺寸的手机,没必要为各个密度提供一套素材,这样可以减小apk大小。现在手机比较高的分辨率是1080×1920(xxhdpi),你可以选择这个尺寸作图,但是图片素材将会增大应用安装包的大小。并且尺寸越大的图片占用的内存也就越高。如果你不是设计ROM,而是做一款应用,建议在720×1280(xhdpi)的画布中作图。这个尺寸兼顾了美观性、经济性和计算的简单。美观性是指,以这个尺寸做出来的应用,在720×1280中显示完美,在1080×1920中看起来也比较清晰;经济性是指,这个分辨率下导出的图片尺寸适中,内存消耗不会过高,并且图片文件大小适中,安装包也不会过大;计算的简单,就是1dp=2px啊,多好计算啊!
如果应用在低端手机上运行较卡顿,可以根据需要提供部分mdpi的图片素材,因为xhdpi中的图片运行在mdpi的手机上会比较占内存。
以应用图标为例,xhdpi中的图标大小是96px,如果要单独给mdpi提供图标,那么这个图标大小是48px,放到drawable-mdpi的资源文件夹中。各个资源文件夹中的图片尺寸同样符合ldpi:mdpi:hdpi:xhdpi:xxhdpi=3:4:6:8:12的规律。如果你把一个高2px的分割线素材做成了9.png图片,你想让细线在不同密度中都是2px,而不被安卓根据密度进行缩放,怎么办?你可以把这个分割线素材放到drawable-nodpi中,这个资源文件夹中的图片,将按照实际像素大小进行显示,而不会被安卓根据密度进行缩放。即在mdpi中细线是2px(2dp),在xhdpi中细线是2px(1dp)。
如果你把一个高2px的分割线素材做成了9.png图片,你想让细线在不同密度中都是2px,而不被安卓根据密度进行缩放,怎么办?你可以把这个分割线素材放到drawable-nodpi中,这个资源文件夹中的图片,将按照实际像素大小进行显示,而不会被安卓根据密度进行缩放。即在mdpi中细线是2px(2dp),在xhdpi中细线是2px(1dp)。
图片资源文件示例

在win下安装完nodejs,版本号v0.12.7,用npm安装hexo,版本v0.12.7,出现
hexo: command not found
我猜应该是找不到路径,设置了环境变量,Path再新增C:\Users\xxxx\AppData\Roaming\npm,依旧找不到命令,无奈最后只能把 nodejs安装目录\node_global下node_modules ,hexo ,hexo.cmd拷到nodejs安装根目录下才能用。网上查资料发现nodejs在win7有些问题,不知道有更好的解决方案没有?

Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.

Quick Start

Create a new post

1
$ hexo new "My New Post"

More info: Writing

Run server

1
$ hexo server

More info: Server

Generate static files

1
$ hexo generate

More info: Generating

Deploy to remote sites

1
$ hexo deploy

More info: Deployment

主题介绍

Jacman 是一款扁平化,有着响应式设计的 Hexo 主题。本站正式使用了 Jacman 主题。Jacman 基于 Pacman 主题修改而来,目前已有很多特性与原主题不同。你可以前往 本站Demo 预览更多关于本主题的更多效果。如果你有任何问题或意见欢迎到 GitHub 发表 issue

距离当初我把 Jacman 开源至今已有半年零一周了,在这半年里也一直保持着对 Jacman 的更新。看到很多人用这款主题,fork&star 数也越来越好看,我也更有动力继续完善 Jacman。Jacman 自然还有很多改进空间,首先是文档问题,有许多人通过博客、微博、QQ 询问我有关主题的问题,我也意识到之前写的帮助手册可读性太差。正好趁着这次 Jacman 大更新,写篇更详尽、readable 的手册。

安装指南

安装

在博客根目录下执行如下命令。

1
$ git clone https://github.com/wuchong/jacman.git themes/jacman

Jacman 需要安装 Hexo 2.7 及以上版本,请先升级您的 Hexo 程序,再启用此主题。

启用

修改你的博客根目录下的_config.yml配置文件中的theme属性,将其设置为jacman。同时建议设置stylus属性中的compress值为true,会自动压缩 CSS 文件,hexo默认配置中不包含这一项,建议开启。如下。

1
2
3
theme: jacman
stylus:
compress: true

更新

1
2
cd themes/jacman
git pull origin master

请先备份您主题目录下的 _config.yml 文件后再升级。

Read More

Nunc dignissim volutpat enim, non sollicitudin purus dignissim id. Nam sit amet urna eu velit lacinia eleifend. Proin auctor rhoncus ligula nec aliquet. Donec sodales molestie lacinia. Curabitur dictum faucibus urna at convallis. Aliquam in lectus at urna rutrum porta. In lacus arcu, molestie ut vestibulum ut, rhoncus sed eros. Sed et elit vitae risus pretium consectetur vel in mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tempus turpis quis lectus rhoncus adipiscing. Proin pulvinar placerat suscipit. Maecenas imperdiet, quam vitae varius auctor, enim mauris vulputate sapien, nec laoreet neque diam non quam.

Read More

This post doesn’t have a title. Make sure it’s accessible.

This is a video test post.

Youtube

Vimeo

This post is used for testing tag plugins. See docs for more info.

Block Quote

Normal blockquote

Praesent diam elit, interdum ut pulvinar placerat, imperdiet at magna.

Quote from a book

Do not just seek happiness for yourself. Seek happiness for all. Through kindness. Through mercy.

David LevithanWide Awake

Quote from Twitter

NEW: DevDocs now comes with syntax highlighting. http://devdocs.io

Quote from an article on the web

Every interaction is both precious and an opportunity to delight.

Code Block

Normal code block

1
alert('Hello World!');

With caption

Array.map
1
array.map(callback[, thisArg])

With caption and URL

.compactUnderscore.js
1
2
.compact([0, 1, false, 2, ‘’, 3]);
=> [1, 2, 3]

Gist

jsFiddle

Pullquote

Left

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempus molestie arcu, et fringilla mauris placerat ac. Nullam luctus bibendum risus. Ut cursus sed ipsum feugiat egestas. Suspendisse elementum, velit eu consequat consequat, augue lorem dapibus libero, eget pulvinar dolor est sit amet nulla. Suspendisse a porta tortor, et posuere mi. Pellentesque ultricies, mi quis volutpat malesuada, erat felis vulputate nisl, ac congue ante tortor ut ante. Proin aliquam sem vel mauris tincidunt, eget scelerisque tortor euismod. Nulla tincidunt enim nec commodo dictum. Mauris id sapien et orci gravida luctus id ut dui. In vel vulputate odio. Duis vel turpis molestie, scelerisque enim eu, lobortis eros. Cras at ipsum gravida, sagittis ante vel, viverra tellus. Nunc mauris turpis, elementum ullamcorper nisl pretium, ultrices cursus justo. Mauris porttitor commodo eros, ac ornare orci interdum in. Cras fermentum cursus leo sed mattis. In dignissim lorem sem, sit amet elementum mauris venenatis ac.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ligula justo, lobortis sit amet semper vel, dignissim sit amet libero. Praesent ac tempus ligula. Maecenas at gravida odio. Etiam tristique volutpat lacus eu faucibus. Donec non tempus arcu. Phasellus adipiscing, mauris nec mollis egestas, ipsum nunc auctor velit, et rhoncus lorem ipsum at ante. Praesent et sem in velit volutpat auctor. Duis vel mauris nulla. Maecenas mattis interdum ante, quis sagittis nibh cursus et. Nulla facilisi. Morbi convallis gravida tortor, ut fermentum enim gravida et. Nunc vel dictum nisl, non ultrices libero. Proin vestibulum felis eget orci consectetur lobortis. Vestibulum augue nulla, iaculis vitae augue vehicula, dignissim ultrices libero. Sed imperdiet urna et quam ultrices tincidunt nec ac magna. Etiam vel pharetra elit.