《响应式Web设计:HTML5和CSS3实践指南》——2.2节创建自适应的响应式字体

简介:

本节书摘来自华章社区《响应式Web设计:HTML5和CSS3实践指南》一书中的第2章,第2.2节创建自适应的响应式字体,作者(美) Benjamin LaGrone,更多章节内容可以访问云栖社区“华章社区”公众号查看

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

2.2.1 准备工作
在进一步讨论之前,我们先看看这个技巧。先通过我最爱的Ipsum生成器(http://ipsum.com)生成一些用于填充的文本内容。至少生成一个段落文本并复制到剪贴板中。

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


de64b4efe3c861019db364166704fc6db53b28f2


fcdc119e53f6875aa7057126331e1ab9b4798787

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

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

相关文章
|
1月前
|
前端开发
web前端开发-----CSS样式设置
web前端开发-----CSS样式设置
31 0
|
2月前
|
IDE Java API
使用Java Web技术构建RESTful API的实践指南
使用Java Web技术构建RESTful API的实践指南
|
2月前
|
编解码 前端开发 JavaScript
|
2月前
|
Web App开发 编解码 前端开发
告别固定字体大小:CSS使用相对单位提升网页可访问性和兼容性
在 Web 开发领域中,有很多误解流传,即使它们被反驳了很多次也仍然存在。"外部链接应该总是在新标签页中打开" 就是一个很好的例子。CSS Tricks 在将近十年前就对此进行了详细的解释(简而言之:大多数情况下是错误的),但它似乎仍然在某些角落中存在。
|
1月前
|
前端开发
web前端开发---CSS基础选择器
web前端开发---CSS基础选择器
20 1
|
8天前
|
前端开发 搜索推荐 数据安全/隐私保护
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
18 1
|
8天前
|
PHP
web简易开发——通过php与HTML+css+mysql实现用户的登录,注册
web简易开发——通过php与HTML+css+mysql实现用户的登录,注册
|
1月前
自适应窗口图片轮播HTML代码
自适应窗口图片轮播HTML代码
20 2
自适应窗口图片轮播HTML代码
|
1月前
|
API
超级炫酷个人引导页自适应HTML源码
超级炫酷个人引导页自适应HTML源码
27 3
超级炫酷个人引导页自适应HTML源码
|
1月前
|
移动开发 API HTML5
HTML5响应式自动采集API壁纸系统源码自适应手机端
HTML5响应式自动采集API壁纸系统源码自适应手机端
41 11
HTML5响应式自动采集API壁纸系统源码自适应手机端