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

简介: 响应式 - 创建自适应的响应式字体

前言

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


准备工作

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


实现方式

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



image.png


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


image.png    


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



image.png


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


工作原理

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


目录
相关文章
|
Java 数据库连接 Nacos
nacos常见问题之Nacos2.0.3集群模式启动报错如何解决
Nacos是阿里云开源的服务发现和配置管理平台,用于构建动态微服务应用架构;本汇总针对Nacos在实际应用中用户常遇到的问题进行了归纳和解答,旨在帮助开发者和运维人员高效解决使用Nacos时的各类疑难杂症。
|
分布式计算 关系型数据库 BI
加速查询MaxCompute再对接FBI(帆软)的完整链路来啦!
本文旨在分享使用交互式分析查询MaxCompute数据,再对接FBI的完整链路,快速搭建大数据生态完整链路。
4667 0
|
11月前
|
JavaScript 前端开发 物联网
「Mac畅玩鸿蒙与硬件1」鸿蒙开发环境配置篇1 - 认识鸿蒙系统与开发工具
本篇将介绍鸿蒙操作系统(HarmonyOS)的基本概念以及在 Mac 环境下进行鸿蒙开发所需的工具。通过了解鸿蒙系统和开发工具的特点,为后续的学习和实践奠定基础。
658 1
「Mac畅玩鸿蒙与硬件1」鸿蒙开发环境配置篇1 - 认识鸿蒙系统与开发工具
|
12月前
|
运维 供应链 安全
SD-WAN分布式组网:构建高效、灵活的企业网络架构
本文介绍了SD-WAN(软件定义广域网)在企业分布式组网中的应用,强调其智能化流量管理、简化的网络部署、弹性扩展能力和增强的安全性等核心优势,以及在跨国企业、多云环境、零售连锁和制造业中的典型应用场景。通过合理设计网络架构、选择合适的网络连接类型、优化应用流量优先级和定期评估网络性能等最佳实践,SD-WAN助力企业实现高效、稳定的业务连接,加速数字化转型。
SD-WAN分布式组网:构建高效、灵活的企业网络架构
|
XML JSON 数据库
Python编程教程
Python编程教程
515 2
|
存储 弹性计算 固态存储
阿里云服务器租用价格参考,云服务器最新活动价格与收费标准分享
2023年阿里云服务器租用费用更新了,阿里云轻量应用服务器2核2G3M带宽轻量服务器一年87元,2核8G4M带宽轻量服务器一年165元;云服务器经济型e实例2核8G3M配置99元1年;除此之外,通用算力型u1实例、计算型c7、通用型g7、计算型c8a与c8i、通用型g8a与g8i均有优惠活动,小编整理了一份2023阿里云服务器最新版收费标准与优惠价格,以供参考。
1852 0
阿里云服务器租用价格参考,云服务器最新活动价格与收费标准分享
|
存储 Devops KVM
虚拟化和容器技术
虚拟化和容器技术
|
SQL 数据挖掘 关系型数据库
【建议收藏】Mysql+Flink CDC+Doris 数据同步实战(上)
【建议收藏】Mysql+Flink CDC+Doris 数据同步实战
7054 0
【建议收藏】Mysql+Flink CDC+Doris 数据同步实战(上)
|
运维 监控 网络协议
【运维知识进阶篇】zabbix5.0稳定版详解7(zabbix分布式监控:使用场景+功能详解+快速部署+基本使用)
【运维知识进阶篇】zabbix5.0稳定版详解7(zabbix分布式监控:使用场景+功能详解+快速部署+基本使用)
1073 0