当前位置:主页 > 网站优化 >

关于移动端上的设计和适配

作者: 奕星SEO 分类: 网站优化 发布时间: 2019-08-16 10:20 内容来源:网络整理阅读量:

特别声明: 文章中图片源于互联网,有些方案也源于互联网,如有觉得侵权,可以告之在下,我会删除!谢谢!著作权归作者所有。

面对于不同移动设备,特别是针对于屏幕高度的设计和适配,一直是困扰着视觉和前端。特别是设计师和前端开发人员之间的协调,沟通的成本也随着增加。那么这篇文档,主要是用于移动端设计和适配(针对屏幕高度方面),希望通过文档的形式能减少设计师和开发人员之间的一些沟通成本,同时让前端开发人员用最低的时间成本来完成终端设备的UI适配工作。

了解一些概念

不管是设计师或者开发人员,对于一些概念都应该要有一定的了解,这样相互沟通的时候就不会因为一些术语感到困惑。接下来简单的了解一些概念:

什么是DPI、PPI?

DPI(Dots Per Inch)是测量空间点密度的单位,最初应用于打印技术中,它表示每英寸能打印上的墨滴数量。较小的DPI会产生不清晰的图片。

后来DPI的概念也被应用到了计算机屏幕上,计算机屏幕一般采用PPI(Pixels Per Inch)来表示一英寸屏幕上显示的像素点的数量,现在DPI也被引入。

个应用实例: 27寸Mac影院显示屏的PPI是109,这表示在每英寸的屏幕上显示了109个像素点。斜角长是25.7英寸(65cm),实际屏幕的宽度大概是23.5英寸,23.5109约等于2560,因此原始屏幕分辨率就是2560 x 1440px。

关于移动端上的设计和适配

屏幕分辨率(原始分辨率)

屏幕分辨率对用户如何理解设计有很大的影响。幸运的是,自从LCD显示器代替了CRT,现在的用户更趋向于使用原始分辨率,它保证了好的屏幕尺寸或者说PPI比例。

分辨率定义了屏幕上显示的像素数量(比如:27寸的显示器分辨率是2560 x 1440px,2560px是宽,1440px是高)。在了解了PPI之后,我们就知道它不是一个测量物理大小的单位。你可以有一个2560 x 1440屏幕,它能跟墙一般大,也可以跟脑袋一般小。

一个27寸的影院显示屏,原始分辨率为2560 x 1440px,PPI为109。如果减小分辨率,元素将会显示得更大,因为有23.5英寸的水平宽度需要数量远远不够的像素点来填满。

关于移动端上的设计和适配

如例子所示,屏幕的原始分辨率是2560 x 1440px。如果分辨率减小,像素点还是被展示在PPI为109的屏幕上。你的操作系统会自动拉伸所有元素来填补间隙,使得整个屏幕被填满。GPU/CPU会捕获所有像素点并且使用新的比例重新计算他们。

如果想要设置27寸屏幕分辨率为1280 x 720(之前宽的一半,高的一半),GPU会让一个像素点变成原来的2倍大来填充屏幕,那么结果就是会变得模糊。在分辨率为原来一半的时候,因为有简单分频器的存在可能看着还算可以。但是如果使用原来的1/3或者3/4,最终会以小数点结束,就不能等分一个像素点了。我们来看下面的例子:

关于移动端上的设计和适配

思考后面的例子:在原始分辨率的屏幕上画一条1px的线,然后设置分辨率为50%。为了填满屏幕,CPU需要制造150%的视觉效果,所有像素点都要乘以1.5,1 x 1.5 = 1.5,但是因为不能有半个像素点,这就使得填充周围的像素点的颜色只有一部分,便产生了模糊。

关于移动端上的设计和适配

注意,我们通常所说的显示器分辨率,其实是指桌面设定的分辨率,而不是显示器的物理分辨率。只不过现在液晶显示器成为主流,由于液晶的显示原理与CRT不同,只有在桌面分辨率与物理分辨率一致的情况下,显示效果最佳,所以现在我们的桌面分辨率几乎总是与显示器的物理分辨率一致了。

什么是视网膜显示屏?

“Retina(视网膜)显示屏”是Apple公司在发布iPhone 4时引入的。之所以叫做Retina是因为设备的PPI非常高以至于人的视网膜也不能在屏幕上分辨出像素点来。

这个说法在现在的设备的屏幕范围内是正确的,但是随着屏幕越来越好,我们的眼睛也会被训练得足够感知像素点,特别是圆形的UI元素。

从技术的角度来讲,他们做的就是在完全相同的物理大小上展示比原来高和宽多一倍的像素点。

iPhone 3G/S是3.5英寸的斜角,分辨率为480 x 320px,PPI为163。 iPhone 4/S是3.5英寸的斜角,分辨率为960 x 640px,PPI为326。


本文链接地址:http://www.seohuizhou.com/webyouhua/1467.html
上一篇:<<来自一名前端工程师的报复
下一篇:分享100本有用的前端PDF书籍>>