创建自适应的响应式字体

该技巧是一个简单的响应式字体示例。它将演示如何使用新的尺寸单元REM。REM的意思是根EM(Root EM)。如果使用EM单元,意味着字体尺寸与根元素字体尺寸有关,而不是父元素字体。

准备工作

在进一步讨论之前,我们先生成一些用于填充的文本内容。至少生成一个段落文本并复制到剪贴板中。

实现方式

现在,将填充文本粘贴到HTML文档中并包装在一个段落标签中。设置该段落元素的类为a,然后再复制一份并将新段落元素的类改为b。如下面的代码片段所示:

<p class="a">
    Lorem ipsum dolor sit amet, consectetur adipiscing el it.
</p>
<p class="b">
    ultricies ut viverra massa rutrum. Nunc pharetra, ipsum ut ullamcorper placerat.
</p>

接下来,创建HTML的基本font-size属性和静态尺寸段落的font-size样式,用来比较字体大小的改变,这有点像实验中的对照组:

html{font-size:12px;}
p.b{font-size:lrem;}

然后创建两个@media査询,一个为orientation:portrait,另一个为orientation:landscape。在orientation:portrait媒介査询中,设置“a”类段落元素的font-size属性值为3rem。在orientation: landscape媒介査询中,设置“a”类段落的font-size属性值为lrem。

@media screen and (orientation:portrait){
    p.a{font-size:3rem;}
}
@media screen and (orientation:landscape){
    p.a{font-size:lrem;}
}

现在,将浏览器窗口从横向模式调整到纵向模式时,会看到第一个段落的字体大小与基本字体大小的比例从1:1变为了3:1。 这虽然看起来非常简单,但是该方法可以多样化,基于此方法可以实现很多令人印象深刻的响应式字体效果。

工作原理

当浏览器发送请求时,CSS3的@media查询会基于视窗宽度返回不同的样式。随着视窗大小的改变会实时地加载或建立(重建)样式。虽然不会有太多的用户在浏览网站过程中频繁改变视窗大小,但是如何使得网站更好地适应不同浏览器窗口大小往往是一项费时的工作。

打赏
吐槽 (1)
×
加载中,请稍候…

您需要 登录 后才能发表评论。

avatar

- 评论

  • 加载中,请稍候…
我要吐槽