太原企业网站制作:响应式网页设计中的排版优化

2019.05.28 太原企业网站制作

121

每当出现关于响应性设计的讨论时,得到最大关注的常用术语和概念包括网格和图像,显然还有流动性或灵活性之类的设置。排版虽然基本上都被认为是重要的,但很少得到应有的重视。响应式网页设计.

太原企业网站制作在这篇文章中,我们将讨论响应式网页设计中的排版。我们的重点将是排版严格与反应的网页设计。

导言

公平地说,响应性网页设计,根据其定义,已经包括了某种程度的响应性排版。尽管许多人不知道或者干脆忽略了这一事实,但是响应性设计包含了宏排版问题,如线条高度、列宽等。然而,所有这一切都不能自然地被称为完全,我们需要做自己的家庭作业。

Responsive Typography像源

现在,当涉及到在响应性设计中实现排版时,方法很简单,并且是双重的:首先,您需要处理类型面本身,也就是说,类型应该根据屏幕大小调整大小,等等。其次,您还需要记住与优化的行长度相关的内容(因为如果在第二点上失败将意味着扼杀您的设计所具有的任何可读性或可读性的机会)。

1。反应型

当你做一些与排版有关的事情时,很明显,这一切都是从字体开始的。无论你是使用下载的字体,还是自己制作字体,还是依赖网络字体,字体本身的重要性都是不容忽视的。

在最基本的层面上,选择可以归结为衬线和无衬线。现在,我既不赞成也不反对,因为我个人喜欢这两者。我还觉得,衬线服务的目的是让你的类型更严肃的外观,而无衬线给予你更多的自由玩。关于衬线与无衬线的争论已经存在了很长一段时间了;关于这一主题的书已经写好了,所以站在这边并不是最容易的(甚至是必要的)事情。

尽管如此,这里有一个实用的建议:如果您的文本大小小于12,请小心使用衬线字体,因为小于12大小的衬线字体不能很好地呈现。

现在,从响应性设计的角度看字体。如果您采用的字体,如海藻剧本对于你的标题,你在台式机上会很好,但是在许多屏幕小得多的移动设备上,除非你让它变得大得令人尴尬,否则你的观众将很难阅读它。

太原企业网站制作

但如果你真的爱上了海草剧本呢?我们怎么解决这个问题?

最简单的方法是为桌面设备上的标题保留Seawide脚本,并为移动设备上的标题切换到另一种字体(很可能是更大的字体本身)。如下所示:

@media (min-width:960px) { h1 {font-family:"Seaweed Script", script;} }@media (max-width:960px) { h1 {font-family:"Droid Sans", serif;} }

2。字体大小、线条高度/长度和对比度

现在,谈第二点!

文本的大小在某种程度上取决于阅读距离。现在,由于与书籍或印刷杂志相比,电脑屏幕与眼睛保持更远的距离,因此文本也必须大于印刷材料。这是因为即使屏幕上的文本有更大的大小,感知大小将更小,因为它将保持更远的眼睛,而不是印刷文本。

Typography Font Size像源

再一次,当我们谈到线的高度时,我们可以将它与印刷文本进行比较。与电脑屏幕相比,印刷的书籍和杂志离眼睛更近,线的高度可以小于屏幕上的文本。此外,你必须记住,线的高度基准,虽然提出了无数网站在互联网上的绝对值,是一个产品的类型脸,你已经选择了。

线路长度呢?Baymard研究所建议,为了便于阅读,一行中的理想字数可以介于50和75个字符。现在,我不建议盲目地遵循这个规则,因为响应性设计意味着我们也必须记住不同的设备大小。在额外的小屏幕上,每行连50个字符也可能不利于可读性。正确的方法是保持50-75作为起始标准,然后考虑到你的目标观众可能使用的不同屏幕大小以及你计划使用的字体,达到理想的线段长度。

特别说明:平板电脑和智能手机

太原企业网站制作在总结之前,让我们先考虑一下用户使用多个屏幕大小的问题。为了简单起见,让我们拿两个有代表性的项目:平板电脑和智能手机。

现在,虽然这两款设备都是便携式设备,但与手机相比,人们往往会把平板电脑放在离眼睛更远的地方(下次拿着平板电脑然后拿手机时,试着注意到这一点)。这就是为什么平板电脑在制定相应的排版规则时可能是一个挑战:当你使用平板电脑时,当你在火车上时,它几乎就在你的膝盖上,或者当你站在公共汽车上的时候,保持在胸部水平,当你躺在床上的时候,可能就在你的脸前面,等等。与台式机的距离变化不大。还有电话?再一次,如果坐在火车上,手机很可能会保持在你的胸部长度,而不是膝盖长度。(显然,例外除外)。

那么,应该做些什么呢?有两件事:

  1. 从较小的线条高度开始,因为屏幕本身较小。
  2. 接下来,你也可以微妙地调整字符间距-尽管不要太奢侈。

上述两种技巧有助于降低智能手机和平板电脑对文本大小的感知差异。由于平板电脑(相对于手机而言,屏幕更大)与眼睛保持更远的距离,字符间距和线条高度的调整确保了尺寸差异的正常化。

结语

排版是响应式网页设计的一个重要方面。尽管一开始它看起来很混乱,但是优化它并不是很困难。

你对这些有关网页设计的排版观察有何看法?在评论中与我们分享你的想法!


最新案例

联系电话 400-6065-301
赚钱高手两组三中三-三中三复式计算公式-三码中特全免费公开码 本港台现场报码直播j2-本港开奖结果现场开码-本港台现场搅珠直播 正版管家婆一句赢大钱-www管家婆27735com-管家婆小鱼儿论坛心水 九龙心水三肖永不改料-九龙心水525757com-九龙老牌图库彩图大全 澳门123696com开奖结果-626969cc澳门资料大全-2021澳门合彩开彩结果