【CSS in Depth 2 精译】2.2.2 使用 rem 设置字号

当前内容所在位置

  • 第一章 层叠、优先级与继承
  • 第二章 相对单位
    • 2.1 相对单位的威力
      • 2.1.1 响应式设计的兴起
    • 2.2 em 与 rem
      • 2.2.1 使用 em 定义字号
      • 2.2.2 使用 rem 设置字号 ✔️
    • 2.3 告别像素思维
    • 2.4 视口的相对单位
    • 2.5 无单位的数值与行高
    • 2.6 自定义属性
    • 2.7 本章小结

2.2.2 使用 rem 设置字号

当浏览器解析 HTML 文档时,会在内存里创建一个包含页面所有元素的模型结构,称为 DOM(Document Object Model,即文档对象模型)。它是一个树形结构,其中的每个元素都由一个对应的节点表示。<html> 元素是顶级(根)节点。在它下面是子节点 <head><body>。再往下是它们的子节点,以及子节点的子节点,逐级嵌套,依此类推。

根节点是 HTML 文档中所有其他元素的祖先节点。根节点有一个伪类选择器(:root)以供选中。它等价于类型选择器(type selector)html,但 :root 的优先级相当于一个类选择器,而非标签选择器。

rem 是“root em”的缩写。rem 不是基于当前元素,而是一个相对于根元素的单位制。无论在文档的任意位置使用 rem1.2rem 都只有一个相同的计算值:1.2 倍根元素的字号。代码清单 2.8 设置了根节点的字号,并通过 rem 定义了无序列表的相对字号。

代码清单 2.8 使用 rem 指定字号

:root { /* 伪类 :root 在效果上相当于标签选择器 HTML */font-size: 1em; /* 使用浏览器的默认字号 16px */
}
ul {font-size: 0.8rem;
}

本例中,根节点的字号为浏览器默认的 16px(根元素上的一个单位 em 是相对于浏览器的默认值字号而言的)。无序列表的字号设为 0.8rem,其计算机则为 12.8px。因为相对根节点,所有字号将始终保持一致,嵌套列表也不例外。

rem 大大降低了因使用 em 引入的复杂度。实际上,rem 综合了像素 px 和相对单位 em 的优点,既发挥出了相对单位的优势,又简单易用。如此说来,是不是可以全用 rem 而抛弃其他单位呢?答案显然是否定的。

别忘了,CSS 的答案通常都是“看情况”。rem 也只是工具包中的一种工具而已。掌握 CSS 很重要的一点是学会因地制宜地使用适当的工具(when to use which tool)。我一般会用 rem 设置字号,用像素设置边框,再用 emrem 设置其他大部分属性,尤其是 padding(内边距)、margin(外边距)以及圆角半径(border radius)。

这样一来,字号就是可预测的,就算其他因素改变了元素的字号,仍然可以借助 em 的强大威力实现内外边距的同步缩放。用像素设置的边框也特别好用,尤其是想要一个好看又精致的直线效果时。这些是我在设计各种样式时的处理单位问题的首选方案——尽管我的个人偏好也随时间及项目而变化。然而它们仅仅是工具,在某些情况下,换个工具可能效果会更好。

小贴士

拿不准的时候,就用 rem 设置字号,用 px 设置边框,再用 em 或 rem 设置其他大部分样式属性(property)。

可访问性:对字号使用相对单位

一些浏览器为用户提供了两种方式来设置字体大小:页面缩放和设置浏览器默认字号。按住 Ctrl + +Ctrl + - 或者在苹果 Mac 电脑使用 Cmd + +/- 就能缩放网页。该操作会缩放所有文字与图片,从而让网页整体放大或缩小。而在另一些浏览器中,这些变更只会临时对当前标签页生效,不会将其同步到新的标签页。

而第二种方式——设置默认字号则不太一样。默认字号通常是在浏览器的设置页操作,这样设置的字号会永久生效,除非用户再次进行修改。这种方式的缺点是,对于用 px 或其他绝对单位设置字号的网页,用户手动设置的浏览器默认字号将会失效。由于默认字号对于某些用户而言至关重要,尤其是视力受损人士,因此应该始终优先考虑通过相对单位或百分比来设置字号。

刚开始使用像素单位可能更容易上手,也更好理解;但如果花时间熟悉相对单位 rem,您就会拥有更广泛更丰富的工具选择,同时也可以创建出可访问性更好的无障碍页面。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/37261.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

2663. 字典序最小的美丽字符串 Hard

如果一个字符串满足以下条件&#xff0c;则称其为 美丽字符串 &#xff1a; 它由英语小写字母表的前 k 个字母组成。 它不包含任何长度为 2 或更长的回文子字符串。 给你一个长度为 n 的美丽字符串 s 和一个正整数 k 。 请你找出并返回一个长度为 n 的美丽字符串&#xff0c;…

【CSS in Depth 2 精译】2.2 em 和 rem + 2.2.1 使用 em 定义字号

当前内容所在位置 第一章 层叠、优先级与继承第二章 相对单位 2.1 相对单位的威力 2.1.1 响应式设计的兴起 2.2 em 与 rem ✔️ 2.2.1 使用 em 定义字号 ✔️2.2.2 使用 rem 设置字号 2.3 告别像素思维2.4 视口的相对单位2.5 无单位的数值与行高2.6 自定义属性2.7 本章小结 2.…

JVM专题八:JVM如何判断可回收对象

在JVM专题七&#xff1a;JVM垃圾回收机制中提到JVM的垃圾回收机制是一个自动化的后台进程&#xff0c;它通过周期性地检查和回收不可达的对象&#xff08;垃圾&#xff09;&#xff0c;帮助管理内存资源&#xff0c;确保应用程序的高效运行。今天就让我们来看看JVM到底是怎么定…

Element UI搭建使用过程

本章内容基于上一篇---Vue-cli搭建项目基础版 Vue-cli搭建项目----基础版-CSDN博客 官网地址:Element - The worlds most popular Vue UI framework 介绍:完全基于Vue.js ,用于快速搭建用户界面. 第一步:安装ElementUI 在终端输入 npm i element-ui -S 在main.js输入 …

Mac提示此电脑不能读取您插的磁盘的原因,Mac磁盘无法读取内容怎么处理

为了能在不同设备中快速传输大容量的文件&#xff0c;我们常常会使用到外接磁盘进行文件的传输。但由于各种原因&#xff0c;比如硬件、文件系统格式等问题&#xff0c;Mac电脑插磁盘会出现无法读取的问题。本文会介绍Mac提示此电脑不能读取您插的磁盘的原因&#xff0c;以及Ma…

MySQL之可扩展性(八)

可扩展性 负载均衡 负载均衡的基本思路很简单:在一个服务器集群中尽可能地平均负载量。通常的做法是在服务器前端设置一个负载均衡器(一般是专门的硬件设备)。然后负载均衡器将请求的连接路由到最空闲的可用服务器。如图显示了一个典型的大型网站负载均衡设置&#xff0c;其中…

ONLYOFFICE 8.1 桌面编辑器测评:引领数字化办公新潮流

目录 前言 下载安装 新功能概述 1.PDF 编辑器的改进 2. 演示文稿中的幻灯片版式 3.语言支持的改进 4. 隐藏“连接到云”板块 5. 页面颜色设置和配色方案 界面设计&#xff1a;简洁大方&#xff0c;操作便捷 性能评测&#xff1a;稳定流畅&#xff0c;高效运行 办公环…

【python】一篇文零基础到入门:快来玩吧~

本笔记材料源于&#xff1a; PyCharm | 创建你的第一个项目_哔哩哔哩_bilibili Python 语法及入门 &#xff08;超全超详细&#xff09; 专为Python零基础 一篇博客让你完全掌握Python语法-CSDN博客 0为什么安装python和pycharm&#xff1f; 不同于c&#xff0c;c&#xff0…

一文看懂LLaMA 2:大型多模态模型的新里程碑

一文看懂LLaMA 2&#xff1a;大型多模态模型的新里程碑 LLaMA 2是OpenAI继GPT-3之后推出的又一重磅模型&#xff0c;它不仅在文本生成方面有所突破&#xff0c;而且在图像处理和语音识别等领域也展现出了令人印象深刻的能力。本文将全面介绍LLaMA 2的背景、技术细节、应用场景…

HBuilder X 小白日记01

1.创建项目 2.右击项目&#xff0c;可创建html文件 3.保存CtrlS&#xff0c;运行一下 我们写的内容&#xff0c;一般是写在body里面 注释的快捷键&#xff1a;Ctrl/ h标签 <h1> 定义重要等级最高的(最大)的标题。<h6> 定义最小的标题。 H标签起侧重、强调的作用…

Socket编程详解(一)服务端与客户端的双向对话

目录 预备知识 视频教程 项目前准备知识点 1、服务器端程序的编写步骤 2、客户端程序编写步骤 代码部分 1、服务端FrmServer.cs文件 2、客户端FrmClient.cs文件 3、启动文件Program.cs 结果展示 预备知识 请查阅博客http://t.csdnimg.cn/jE4Tp 视频教程 链接&#…

1、案例二:使用Pandas库进行进行机器学习建模步骤【Python人工智能】

在人工智能和机器学习项目中&#xff0c;数据处理是一个至关重要的环节。Pandas是Python中一个强大的数据处理库&#xff0c;它提供了高效、灵活的数据结构和数据分析工具。下面是一个使用Pandas库进行数据处理的例子&#xff0c;涉及数据清洗、特征工程和基本的统计分析。 示…

AI大模型怎么备案?

随着人工智能技术的飞速发展&#xff0c;生成式AI正逐渐渗透到我们的日常生活和各行各业中。从文本创作到艺术设计&#xff0c;从虚拟助手到智能客服&#xff0c;AI的身影无处不在。然而&#xff0c;技术的创新与应用&#xff0c;离不开法律的规范与引导。为进一步保障和监管AI…

cocos creator 调试插件

适用 Cocos Creator 3.4 版本&#xff0c;cocos creator 使用google浏览器调试时&#xff0c;我们可以把事实运行的节点以节点树的形式显示在浏览器上&#xff0c;支持运行时动态调整位置等、、、 将下载的preview-template插件解压后放在工程根目录下&#xff0c;然后重新运行…

kubernetes Deployment yaml文件解析

一、yaml文件示例 apiVersion: apps/v1 kind: Deployment metadata:labels:app: nginxname: nginxnamespace: mtactor spec:replicas: 4revisionHistoryLimit: 10selector:matchLabels:app: nginxstrategy:rollingUpdate:maxSurge: 25%maxUnavailable: 25%type: RollingUpdate…

C++:inline关键字nullptr

inline关键字 C中inline使用关键点强调 (1)inline是一种“用于实现的关键字”&#xff0c;而不是一种“用于声明的关键字”&#xff0c;所以关键字 inline 必须与函数定义体放在一起&#xff0c;而不是和声明放在一起 (2)如果希望在多个c文件中使用&#xff0c;则inline函数应…

树莓派4B_OpenCv学习笔记15:OpenCv定位物体实时坐标

今日继续学习树莓派4B 4G&#xff1a;&#xff08;Raspberry Pi&#xff0c;简称RPi或RasPi&#xff09; 本人所用树莓派4B 装载的系统与版本如下: 版本可用命令 (lsb_release -a) 查询: Opencv 版本是4.5.1&#xff1a; 今日学习 OpenCv定位物体实时位置&#xff0c;代码来源是…

阿里AIDC - 杭州 - 渗透测试岗

渗透测试岗 - 阿里AIDC - 杭州 面试开始 一、自我介绍 - 2分钟二、面试官提问与个人对答三、问面试官问题面试结束 结果&#xff1a;个人觉得悬&#xff0c;但是对方很有礼貌&#xff0c;说话态度也非常好总结&#xff1a;其实问题问的并不是特别难&#xff0c;主要是自己对攻击…

操作系统期末复习(对抽象概念的简单形象化)

操作系统 引论 定义与基本概念&#xff1a;操作系统是计算机硬件与用户之间的桥梁&#xff0c;类似于家中的管家&#xff0c;它管理硬件资源&#xff08;如CPU、内存、硬盘&#xff09;&#xff0c;并为用户提供方便的服务&#xff08;应用程序执行、文件管理等&#xff09;。…

从 Linux 向 Windows 传文件和从 Windows 向 Linux 传文件的方法

这两种传递文件的方式是可行的&#xff0c;下面是对每种方式的具体说明和步骤&#xff1a; 1. 从 Linux 向 Windows 传文件 使用 Python 的 HTTP 服务器&#xff0c;可以在 Linux 端快速搭建一个简单的文件服务器。 步骤如下&#xff1a; 在 Linux 终端中&#xff0c;进入你…