响应式 - 创建自适应的响应式字体

2024-05-05 00:01:59

前言

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

准备工作

在进一步讨论之前，我们先看看这个技巧。先通过我最爱的Ipsum生成器（ipsum.com）生成一些用于填充的文本内容。至少生成一个段落文本并复制到剪贴板中。

实现方式

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

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

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

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

工作原理

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

响应式 - 创建自适应的响应式字体相关推荐

Bootstrap响应式与自适应区别
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" ...
rem 前端字体_响应式网页设计:rem设置网页字体大小自适应
首先简单科普一下什么是响应式网页.响应式网页是指会根据输出设备的分辨率不同,而自动调整布局的网页.同时,在输出设备分辨率改变时,也能及时自动调整.说穿了,就是三个字:自适应. 响应式网页不仅仅是响应不 ...
响应式与自适应设计:设计师的最佳选择是什么?
作为全球先进的科技巨头,Google一直推崇响应式网页设计,并在今年的4月21日发布了重大的更新,目的是提高响应式在移动终端上的运行效率.尽管在更新中没有明确表明你必须使用响应式设计.只是简单的提示响 ...
响应式和自适应的区别
先给大家体验一下响应式和自适应的区别,请放大缩小一下屏幕尝试自适应的体验http://m.ctrip.com/html5/ 响应式的体验 http://segmentfault.com/ 整理了几 ...
前端系列19集-vue3引入高德地图，响应式，自适应
npm i @amap/amap-jsapi-loader --save import AMapLoader from '@amap/amap-jsapi-loader' // 使用加载器加载JSAP ...
如何实现响应式（自适应）网页
目录什么是响应式布局为什么会造成布局混乱 META标签相对度量 FLEX布局宽高设置媒体查询替换元素响应式框架什么是响应式布局响应式网页(Responsive Web,RW)又称自适 ...
Restive.js – 轻松让网站变成响应式和自适应
Restive.js 是一个 jQuery 插件,可以帮助您轻松快捷地添加响应式功能到你网站,适应几乎所有拥有 Web 功能的设备.使用设备检测,高级管理断点,以及方向管理的组合,Restive.js ...
为什么响应式（自适应）网站是一个坑
什么是自适应网站?其实自适应更专业的说法是响应式网站.在2010年5月,Ethan Marcotte提出的响应式网站的概念,通俗的说,就是一个网站可以兼容不同的终端,不用为每个分辨率设备做一个特定的版 ...
苹果cmsv10奇热影院响应式模板自适应pc+手机端好看的简约模板
苹果CMSv10最新原创炫酷黑渐变特色自适应视频站模板苹果cms10好看的模板自适应_苹果cmsv10高端模板_苹果cmsv10简洁模板酷黑渐变特色功能触动封面直接播放视频内容,自适应影视模板 ...

最新文章

热门文章