认识达内从这里开始

认真做教育专心促就业

佛山达内：响应式排版快速指南你知道吗?

发布：佛山IT培训
来源：佛山达内
时间：2018-04-26 15:18

佛山达内编者谈到在我们当前的设计中，可以看到其垂直方向的韵律依然还是浏览器默认的状态，而不同浏览器上的显示是不同的。这可不行，我们需要搞清楚到底什么才是合适的行高、边距以及字号。在移动设备上使用与桌面端一模一样的字号和字距就和使用同一套栅格一样荒谬。无线端和桌面端的区别极大，其上的阅读体验也大不相同。

很多时候我们在纵向排版的韵律确定后就会迫不及待地去折腾颜色、栅格甚至布局。搞清楚栅格系统里的节点确实重要，但是你不能因此无视响应式排版，根据屏幕尺寸调整垂直排版的韵律感同样需要琢磨。

无论是对于印刷、网站或是电视广告来说，排版都是我们用来沟通信息的主要方式。排版之重要性我想已无须赘述。然而，“理解”和“实践”还是相差十万八千里的，特别是在网页设计中，“一个字号走天下”的想法可以歇歇了。我们或许都听说过响应式网站，但我想你们中可能很少有人知道什么是响应式排版吧。

下面佛山ui培训小编会给你们展示响应式排版的重要性，以及如何简单地实践它。

排版是设计中非常基础但又无比重要的一环，这点我想大家都认同。在网页设计中，排版早些年的日子比较苦逼，或者说其很难得到与之重要性相匹配的待遇——和很多其它的设计元素一样，那时我们并不具备在网页中完整表现它们的技术。但幸运的是，我们走过来了。

排版能帮助我们沟通信息，这可不是一件小事。优秀的排版能有助于沟通的过程明晰、高效。可读性是所有设计都需要面对的大课题。那么现在，我们就来亲手实践下。

下面你可以看到一张只显示文字的图片。这是我从维基百科上随意复制黏贴过来的一段文字，然后把它放到HTML文档里显示出来。

你自己对比看看上下两张图就知道孰优孰劣了。不过别掉以轻心，一切才刚刚开始。这看起来很简陋，而且难以阅读。上面的这张截图显示的是浏览器默认的16px Times New Roman字体。既然这样，我们就先试试看把它升级到18px的PT Serif字体(Google出品)。然后我们需要对每一行的字符数量做下调整。在桌面端，每一行的字符量应该在60到75之间。于是我把整个文本的宽度调整到580px。

佛山IT培训小编了解到iA在2012年时写的一篇“Responsive Typography: the Basics”中提到了使用手机和电脑进行阅读时眼睛与设备之间的距离是不同的，而这正是对阅读体验造成影响的本因。从下面这张图片可以看到，在移动设备上，18px的字号显然太大了些。它就像把所有东西一下放大的同时却没有提供有助于阅读体验的视觉平衡。

< 上一篇：佛山达内：容易被忽视的弹框细节有哪些?

下一篇：佛山达内：学UI设计都要学什么知识? >