超实用！写给设计师的移动页面适配小知识

2017-09-29 10:12:20 来源：易采站长用户投稿作者：优设网

　　话道从设想稿到前端页里真现，是产物流程中十分主要的一环，那个阶段决议了设想师设想的设想稿可否完善天酿成实正的产物雏形。空话没有多道，本文次要引见以下三块内容：挪动装备尺寸;前端适配计划;设想师取前端怎样对接。

　　进步页里复原度的办法皆正在那了!

　　挪动装备尺寸

　　网上特地解说挪动装备尺寸的文章许多，究竟上，挪动装备品种之多几乎是恶梦普通。以是，实践正在设想大概开辟历程中，常常只是挑选几种装备做为基准去停止设想战开辟，而关于其他状况，则接纳一些适配战略笼盖。

　　今朝支流的，是以 iPhone4 的 640x960px 大概 iPhone6 plus 的 1242x2208px 为基准设想，其他装备均采纳适配战略。我们先假定设想稿是按 640x960px 的标准输出，先去看看前真个经常使用适配计划。

　　前端适配计划

　　前真个适配计划大抵分为四种：1，按照 meta 按比例缩放;2，按照页里宽度百分比顺应;3，基于媒体查询的呼应式计划;4，REM缩放计划。

　　1，按照 meta 按比例缩放

　　那种计划的真现更偏偏手艺，大抵本理是按照装备的分辩率及像素比等疑息，计较出页里的缩放(scale)数值，去停止等比缩放。终极的结果便是基于 640x960px 的设想稿再停止等比缩放，那种真现比力合适某些图片较多的举动页里开辟，能够利用设想稿上的尽对像素值停止开辟，即设想稿上是 200px 则 CSS 代码中的数值也是 200px。

　　固然，那种计划也有致命的缺陷，即剧本计较的成果很易笼盖局部装备，关于一些计较禁绝确，大概分辩率像素比已知的装备，很简单全部页里非常放年夜或减少，间接表露严峻 BUG。综上，那种缩放计划能够总结出以下根本特性：

　　结果：按设想稿等比缩放

　　场景：图片较多的举动页里开辟

　　长处：能够间接根据设想稿像素值开辟

　　缺陷：很多装备没法笼盖，不竭挖坑

　　2，按照页里宽度百分比顺应

　　已经很少的一段工夫，我们皆接纳百分比适配计划。比方微疑购物进口中的京东购物，今朝仍旧接纳那种计划。

　　那种计划的次要表示便是，正在比基准装备(如 640x960px)宽的装备上，页里元素的横背宽度是按百分比自顺应的，可是下度没有会变革。以是，不管逢到甚么装备，只需求正在宽度长进止兼容便可满意，而文本图片等内容，也能够根据宽度自顺应，尽量充实操纵屏幕空间。

　　而开辟时，因为 iPhone 和很多 Android 机皆具有下分辩率屏幕，好比 iPhone4S 的 Retina 屏幕实践像素面是物理像素的两倍。以是，我们开辟时要正在 640x960px 的设想稿尺寸的根底上除以 2，好比设想稿上的下度是 200px，则 CSS 中便是 height:100px;

　　闭于 Retina 屏幕的根本常识，倡议各人本人查找材料，我只挑重面。

　　结果：按设想稿尺寸除以2，元素宽度利用百分比真现

　　场景：仄台型页里，页里规划没有是很庞大

　　长处：能够顺应险些一切装备

　　缺陷：横背推宽会使规划比例平衡，且庞大构造百分比真现有易度

　　3，基于媒体查询的呼应式计划

　　呼应式设想，已经以致如今皆长短常时兴的观点，不外正在实践使用中，呼应式设想借是有其相对局促的使用场景。普通除一些立异的小公司，大概某些专题网站以外，很少会用一套代码去适配一切末端。好比 PC，Mobile，Pad 以至 iWatch 等，齐皆用一套代码去适配隐然是没有科教的。

　　今朝遍及的不雅面是，呼应式设想更合适专题页里，大概出有资本去针对各个末端停止零丁开辟的团队去利用。