流体排版= = =未来的响应能力

当这个词反应第一次进入营销者和网页设计师的词汇,我们用它来描述电子邮件和网站设计的未来。网页设计师特别是面临一个巨大的挑战——创建网站,提供移动平板电脑和桌面用户提供一个网站,不仅符合他们的屏幕,发表了令人愉快的体验。

响应性并不是一个新趋势,但它是一个非常重要的一个。用户体验是一个主要因素谷歌网站速度是否会出现在搜索结果中。谷歌,它是如此重要提供免费的咨询服务

即使对于那些努力使他们的网站回应,仍有工作要做来提供更好的访问体验。但真正改变的定义术语“所有设备”实际上意味着什么。


几年前,当有人说“所有设备响应”可能意味着3设备:

  • 桌面
  • 平板电脑
  • 智能手机


而这些3最常见的描述设备类型,我们必须意识到我们的网站访问者可以浏览我们的网站在各种屏幕尺寸从大苹果mac轻量级较小的笔记本电脑屏幕。技术不断进步,我们必须准备好新的和令人兴奋的可穿戴技术和虚拟现实等设备类型。

跳排版与流体排版

让关注响应设计元素之一——文本。当你切换从一个设备到另一个,网站上的字体大小必须改变。但是,如何实现它呢?简单:编码网站的时候,你在像素定义不同的字体大小(像素)不同的显示屏幕的大小。

当你打开网站9英寸的平板电脑,字体大小会跳转到一个更小的尺寸。


但7”或12”平板电脑?字体大小保持不变吗?这里我们接近的概念流体的排版

想象各种各样的设备和屏幕尺寸不仅在不同品牌,而且各种型号相同的品牌的手机、平板电脑或笔记本电脑,不要忘记大电视屏幕。

当我说,你同意我的观点定义字体大小为每个这些设备是不可能的。

事实上,这将是疯狂的如果有人甚至试图这样做。这就是为什么一些聪明的头脑想出了流体的排版,这样字体可以自己调整。如何?通过定义相对的字体大小基于实际的屏幕大小。

这个魔术是如何发生的?

而不是定义的字体大小,你可以使用快速眼动的单位,这是相对于根元素的字体大小(听起来复杂但忍受我们会尽量不让你睡眠(REM双关语吗?不。好吧我们继续)

大多数浏览器默认字体大小16 px的价值,这样我们很容易阅读的文本。所以使用快速眼动,如果你想要16 px的字体在你的网站上,你说你的字体大小是1快速眼动。你也可以用它来改变你的字体大小相对如0.75 rem (12 px)或大或1.25 rem (20 px)等。

EM单位同样的工作,你定义自己的基本字体大小对于所有其他字体大小的计算。你可以在这里阅读更多关于EM单位。

更先进的字体大小单位:Vh和大众

快速眼动和EM单位中经常使用跳排版。您可以创建好,响应性网站与他们,但从较小的字体大小过渡到一个更大的(反之亦然)不会像它可以一样光滑更多相关单位如Vh和大众。

Vh代表视窗高度和大众窗口宽度。而不是看根在浏览器中字体大小一样在快速眼动和EM单位,理想字体大小计算基于屏幕的高度和宽度你显示你的网站。这是一些下一个层次AI-style的变戏法!

每个设备都有自己的字体大小

你只需要使用Vh和大众定义的最大和最小的字体大小你要确保字体容易阅读在所有情况下,你会得到一个网站和一个真正的流体排版。哈!快乐的网站访问者。加上你要看起来像个天才能否经得住时间的考验的网站优化。

所以如果你想创建一个新的网站,深入代码并找出定义字体大小。跳排版将确保你的网站是响应。

但是,如果你想为未来做好准备,Vh和大众的字体大小的单位。当你的网站使用液体排版,看起来永远整洁清晰。

这篇文章通过JarinkaBalcova,经验丰富的营销人员和WordPress爱好者Ait-Themes.club。河中的小岛的主题是一个web开发人员公司9 +市场上多年的经验和85 k全球客户快乐。主要领域是多语种WordPress的主题。专业也在目录和清单WordPress主题和先进的插件。

克莱尔·奥布莱恩

克莱尔·奥布莱恩

克莱尔·奥布莱恩在DesignWizard营销经理。克莱尔有超过十年的经验内容创建包括视觉内容,数字营销,电子邮件营销,社交媒体和广告。bet188国际官方她有一个狂热的all things digital和软件相关的兴趣。

Baidu
map