潍坊做网站欢迎光临易企潍坊网络公司
您当前位置:易企潍坊网络公司 >> 做网站 >> 浏览文章

移动端尺寸基础知识

文章标签:移动,尺寸,基础,基础知识,知识 发布时间:2022年05月22日 预览171

初涉移动端设计和开发的同窗们,基本都会在尺寸问题上纠结好一阵子才能摸到头绪。我也花了很长时间才弄晓畅,感觉有需要写一篇足够通俗易懂的教程来帮助大家。从原理说起,理清关于尺寸的所有细节。因为是写给初学者的,所以不要嫌我啰嗦。

现象

首先说现象,大家都知道移动端设备屏幕尺寸特别很是多,碎片化严重。尤其是Android,你会听到许多种分辨率:480x800, 480x854, 540x960, 720x1280, 1080x1920,而且还有传说中的2K屏。近年来iPhone的碎片化也加剧了:640x960, 640x1136, 750x1334, 1242x2208。

不要被这些尺寸吓倒。现实上大部分的app和移动端网页,在各种尺寸的屏幕上都能正常显示。说明尺寸的问题一定有解决方法,而且有规律可循。

像素密度

移动站点开发 移动站点优化 Web开发 网站策划

要知道,屏幕是由许多像素点组成的。之前提到那么多种分辨率,都是手机屏幕的现实像素尺寸。比如480x800的屏幕,就是由800行、480列的像素点组成的。每个点发出不同颜色的光,构成我们所看到的画面。而手机屏幕的物理尺寸,和像素尺寸是不成比例的。最典型的例子,iPhone 3gs的屏幕像素是320x480,iPhone 4s的屏幕像素是640x960。刚好两倍,然而两款手机都是3.5英寸的。

所以,我们要引入最主要的一个概念:像素密度,也就是PPI(pixels per inch)。这项指标是连接数字世界与物理世界的桥梁。

移动站点开发 移动站点优化 Web开发 网站策划

Pixels per inch,准确的说是每英寸的长度上排列的像素点数量。1英寸是一个固定长度,等于2.54厘米,大约是食指最末端那根指节的长度。像素密度越高,代表屏幕显示效果越邃密。Retina屏比通俗屏清晰许多,就是因为它的像素密度翻了一倍。

倍率与逻辑像素

移动站点开发 移动站点优化 Web开发 网站策划

再用iPhone 3gs和4s来举例。假设有个邮件列表界面,我们不妨按照PC端网页设计的思维来想象。3gs上也许只能显示4-5行,4s就能显示9-10行,而且每行会变得特殊宽。但两款手机其实是一样大的。假如照这种体例显示,3gs上刚刚好的效果,在4s上就会小到根本看不清字。

移动站点开发 移动站点优化 Web开发 网站策划

在现实中,这两者效果却是一样的。这是因为Retina屏幕把2x2个像素当1个像素使用。比如原本44像素高的顶部导航栏,在Retina屏上用了88个像素的高度来显示。导致界面元素都变成2倍大小,反而和3gs效果一样了。画质却更清晰。

注:相关网站建设技巧阅读请移步到建站教程频道。

123 下一页 查看全文
上一篇:案例解析这么设计网站导航怎能不出彩?
下一篇:奇葩模式外国版的赶集网在干啥?劝人分手
点击数:  相关搜索:移动 尺寸 基础 基础知识 知识