谈一谈rem的应用场景及其如何使用

2024-05-09 10:58

本文主要是介绍谈一谈rem的应用场景及其如何使用,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

rem

rem是什么

相信大多数同学都写过移动端,那么对rem就很熟悉了,它是相对长度单位。相对于根元素(即html元素)font-size计算值的倍数的一个css单位,也就是我们
前端常说的适配单位rem。


认识rem

当浏览器解析HTML文档时,创建了一个用来代表页面元素的集合,叫做DOM(文档对象模型,Document Object Model)。树状结构,每一个节点代表一个元素。<html>就是顶层节点(根节点),在下面的是它的子节点<head>和<body>,再往下就是它们的子节点,还有后代节点,如此类推。

根节点是文档里所有其他元素的祖先。它有一个特别的伪类(pseudo-class)选择器(:root),在样式表里可以用这个选择器表示。使用带类名的类型选择器html,或者直接用标签选择器,效果是一样的。

rem是根em(root em)的缩写。rem是和根元素关联的,不依赖当前元素。不管你在文档中的什么地方使用这个单位,1.2rem的计算值是相等的,等于1.2倍的根元素的字号大小。

这样前后铺垫相信童鞋们可以理解它。


对font-size使用rem

 

:root{                       1font-size: 1em;           2
}
ul{font-size: 1rem;
}
  • 1 伪类:root等价于css的html选择器;
  • 2 使用了浏览器标准字号(16px);

在这个示例里,根字号大小是浏览器的默认大小16px(根元素的1em等于浏览器的默认字号大小)。无序列表的字号大小为0.8rem,计算结果是12.8px。因为这只跟根元素相关,尽管你在列表里嵌套了列表,嵌套子列表的字号仍然保持不变。

可用性:对font-size使用相对长度单位

一些浏览器会提供给用户2种方式定制文字的大小:缩放和设置一个默认的字号大小。通过按Ctrl+或者Ctrl-,用户可以对页面进行缩放。这在视觉上会把整个页面的文字或图片(其实是所有元素)都放大或缩小了。在一些浏览器,这个改变只针对当前的标签页且是临时的,不会影响到新开的标签页。

设置默认字号大小,会有点不一样。不仅仅是设置的入口比较难找(一般在浏览器的设置页),而且这个设置是永久的,直到用户把默认值还原。值得注意的是,这个设置对使用px或其他绝对单位定义的字号大小无效。因为默认字号大小对一些用户是必要的,尤其是弱视的群体,你应该用相对单位或百分比来定义字号的大小。

深度了解rem

rem简化了很多em带来的复杂度。事实上,rem提供了一个在px和em间的相对单位折中解决方案,而且更易于使用。那么,是不是意味着你应该在对所有元素都使用rem,去掉其他长度单位呢?当然不是。

在CSS的世界里,这个答案通常是,看情况。rem只是你的工具箱中的其中一个。掌握CSS很重要的一点,就是学会分辨在什么场景下该使用什么工具。我的选择是,对font-size使用rem,对border使用px,对其他的度量方式如padding、margin、border-radius等使用em。然而在必要时,需要声明容器的宽度的话,我更喜欢使用百分比。

这样,字号大小就变得可预测,而当其他因素影响到元素的字号大小时,你也可以借助em去缩放元素的padding和margin。在border上使用像素是很合适的,尤其当你想要一根漂亮的线的时候。以上就是我对不同属性使用不同单位的理想方案,不过我要再次声明,这些都是工具,在某些特定场景下,利用不同的工具可能取到更好的效果。
提示:在你不确定的时候字号给rem,border给px,其他单位值给em

请停止使用像素思维去思考

把页面的根元素字号大小定义为0.625em或者62.5%,在最近几年来,这样的用法很常见,这是一种模式,或者更贴切地说,这是一种反模式。
[ 下面代码全局定义font-size为10px ]

 

html{font-size: .625em;
}

我并不推荐这种用法。这个用法把浏览器默认的字号大小16px缩小到10px。这样做的好处是简化了计算,如果设计师告诉你字号大小应该是14px,那你可以很轻易地计算出1.4rem,毕竟我们还是在使用相对单位。

一开始,这看起来很方便,但事实上这样的实现方式有两个问题。第一,强制你写了很多重复的样式代码。10px对于大多数文本来说太小了,你需要在整个页面中,来来回回地覆盖它。你会发现,自己把一段段落(<p>)的字号大小声明为1.4rem,然后又把导航(<nav>)的链接字号大小声明为1.4rem,样式代码中还有很多这样的用法。这样引入了更高的错误风险,当你需要修改时发现代码耦合程度比较高,同时也会让样式文件变大。

第二个问题是,你这么做的时候,其实你还是在用像素的思维在思考。虽然在代码里写的是1.4rem,但是在你的脑子里,其实还是想的是14px,哈哈,我以前一直这样。在响应式网页开发中,我们应该学会适应那些“模糊”的值。1.2em实际等于多少像素,并不重要,你只需要知道这是比继承的字号大一点点,那就足够了。而且,如果在屏幕上这不是你想要的效果,那就改吧。这是需要时间实验和试错的,但事实上,使用px的时候我们也需要这样做。

当使用em时,我们很容易陷入纠结,这个值转化成像素值会是多少呢?尤其对于字号大小。你一直在乘和除以em值,这样你很快就会疯掉了。相反,我希望你可以接受一项挑战,尝试培养先开始使用em的习惯。如果你习惯使用像素,那转成em是需要一定时间和练习的,但相信我,这很值得。

这不是在说你再也不使用像素了。如果你跟一个设计师合作,你可能需要用更精确的像素值去沟通,这没问题的。在项目的开始,你需要声明一个基础的字号大小(通常是对标题或者标注的常用字号)。使用绝对值去描述大小,往往会更加容易。

转换成rem会有计算环节,那就让计算器去忙吧(通常我会在Mac电脑上按cmd+空格,在Spotlight里计算)。首先在根元素上声明根字号大小,从那开始,使用像素应该是例外的情况,而不是常态。

在这章内容里,我还是会持续地聊起像素。这会有助于我解释相对单位的工作原理,同时也能帮助你培养计算em值的习惯。在这章之后,我基本会使用相对单位来讨论字号的大小。

设置一个合理在字号大小

先假设你想把默认字号设定为14px。把10px设定为基准值,再在页面中去覆盖它的写法,我们不推荐这种写法,相反,你应该在根元素上直接声明一个值。
在这个代码片段里,目标字号值是继承的,浏览器的默认值16px,那么14/16 = 0.875。

把下面的代码添加到一个新的样式表的最上面,我们会在这上面添加其他代码。这里设定根元素(<html>)的默认字号大小。

 

:root:{                      1font-size:0.87em;       2
}
  • 1 或者使用 HTML 选择器;
  • 2 14/16(期望值px / 继承值px)等于0.875;

现在,你的期望基准字号14px对整个页面的元素有效,你不需要在其他地方重新声明了。你只需要在设计不一样的地方修改成新的字号,譬如标题。

创建的这个面板,基于14px字号,使用相对单位。

摸版

代码实例

 

<div class="panel"><h2>Single-origin</h2><div class="panel-body">We have built partnerships with small farms around the world tohand-select beans at the peak of season. We then carefully roastin <a href="/batch-size">small batches</a> to maximize theirpotential.  </div>
</div>

下一段代码是样式的。你会在padding和border-radius使用em,标题的字号使用rem,以及border使用px。把下面代码添加到你的样式表吧。

 

.panel {                 padding: 1em;                    border-radius: 0.5em;            border: 1px solid #999;          
}
.panel > h2 {margin-top: 0;                   font-size: 0.8rem;               font-weight: bold;               text-transform: uppercase;       
}

这段代码给面板添加了一个细边框以及定义了标题的样式。我希望标题的字号小一点,但要加粗和全是大写。(你可以根据自己的设计,把字号改大点或者使用不同的排版方式)

第二个选择器>是一个直接后代组合选择符(direct descendant combinator),它代表的是.panel下的子元素h2。更完整的选择器和组合选择符的索引可以看附录A。

在代码片段2.13中,为了更清晰看到效果,我给body添加了一个类panel-body,不过你会发现,在你自己的代码里是不需要的。因为这个元素从根元素上继承了字号大小,它已经是你想要看到的那样。

让这个面板变成‘响应式’

我们再更深入地看看这个问题。你可以根据屏幕尺寸的变化,添加媒体查询来改变基础字号大小,这可以令面板在不同尺寸的屏幕下,有不同的大小变化。

 

:root {                            1font-size: 0.75em;               1
}
@media (min-width: 800px) {        2:root {                          2font-size: 0.875em;            2}                                2
}                                  2
@media (min-width: 1200px) {       3:root {                          3font-size: 1em;                3}                                3
}
  • 1 针对所有屏幕,但是在更大的屏幕会被覆盖
  • 2 针对比800px更宽的屏幕,覆盖默认样式代码
  • 3 针对比1200px更宽的屏幕,覆盖以上两套样式代码

第一套样式规则,声明了小屏幕中的默认字号大小,这是我们想要在较小的屏幕上看到的字号大小。然后使用媒体查询,把800px和1200px分别作为两个分水岭逐级增加字号的大小,覆盖掉默认的代码。

针对页面的根元素使用这些字号大小,响应式地重新定义em和rem对应的值,从而达到响应改变整个页面的效果。尽管你没有直接对这个面板做任何的修改,它现在是响应式的。在小屏幕上,譬如一台手机,字号大小会被渲染成更小的(12px)。然后,在更大的屏幕上,宽大于800px和大于1200px的,组件的字号会分别放大到14px和16px。改变你的浏览器窗口,看看组件是怎么变化的吧。

如果你在整个页面中像这样严格使用相对单位,整个页面会随着视窗大小放大和缩小。这会是你的响应式策略里很重要的一部分。上面的2套媒体查询声明代码,可以帮助你节省在页面的其他部分使用媒体查询的额外代码。不过,如果你在元素中声明的字号大小是以像素为单位的,那就不会产生任何效果了。

类似地,如果你的老板或者客户觉得现在网站的字号太小或者太大,你随时可以做到通过修改一行代码影响到全局的元素,这项改变会影响到页面上的其他元素,不费吹灰之力。

调整单个组件的大小

你也可以通过使用em缩放页面上的一个独立组件。有时,你可能会需要界面上的某些组件可以有个大号的版本。在我们的面板上这么做吧,首先你需要给面板添加一个类名large:<div class="panel large">。

在下图中,我们看到了面板的普通版和大号版的比较。效果类似响应式面板,但是两种尺寸是可以同时在同一个页面中使用的。

响应式

我们来对面板的字号声明方式做一些小的修改。你还是在使用相对单位,但需要调整它们的基准值。第一点,给每个面板的父元素字号大小的定义font-size: 1rem。这里指的是,不管在什么地方使用这个面板,每个面板的字号大小是一个确定值。

第二点,使用em重新声明标题的字号大小,而不使用rem,这样标题就可以和刚才声明的父元素字号1rem关联起来。下面是对应的代码,更新下你的样式表代码吧。

[代码片段创建一个面板的大号版本 ]

 

.panel {font-size: 1rem;               1padding: 1em;border: 1px solid #999;border-radius: 0.5em;
}
.panel > h2 {margin-top: 0;font-size: 0.8em;              2font-weight: bold;text-transform: uppercase;
}
  • 1 给组件声明确定的字号大小
  • 2 其他元素的字号大小用em和父元素字号关联

这些修改看起来并没有影响面板的样式,但是现在你已经准备好了,做一个大号的面板只需要修改一小行代码。你需要做的,就是把父元素字号大小改写成1rem以外的一个值。因为其他元素的计算方式都依赖父元素的字号大小,只要修改它,整个面板的相关尺寸都会发生改变。添加下一个CSS代码片段到你的样式表,定义一个大号面板吧。

[ 代码片段 利用一行代码放大整个面板 ]

 

.panel.large {               1font-size: 1.2rem;
}
  • 1 组合选择器指向同时有panel类和large类的元素

现在,你可以给普通面板添加class=”panel”和给大号面板添加class=”panel large”。类似地,你也可以定义一个小号版本,只需要把父元素的字号设得比1rem小。如果这个面板是一个更复杂的组件,包含多种字号大小或padding,也只需要一个声明就可以重置大小,只要所有的子元素都是使用em声明的。



 

这篇关于谈一谈rem的应用场景及其如何使用的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/973224

相关文章

中文分词jieba库的使用与实景应用(一)

知识星球:https://articles.zsxq.com/id_fxvgc803qmr2.html 目录 一.定义: 精确模式(默认模式): 全模式: 搜索引擎模式: paddle 模式(基于深度学习的分词模式): 二 自定义词典 三.文本解析   调整词出现的频率 四. 关键词提取 A. 基于TF-IDF算法的关键词提取 B. 基于TextRank算法的关键词提取

水位雨量在线监测系统概述及应用介绍

在当今社会,随着科技的飞速发展,各种智能监测系统已成为保障公共安全、促进资源管理和环境保护的重要工具。其中,水位雨量在线监测系统作为自然灾害预警、水资源管理及水利工程运行的关键技术,其重要性不言而喻。 一、水位雨量在线监测系统的基本原理 水位雨量在线监测系统主要由数据采集单元、数据传输网络、数据处理中心及用户终端四大部分构成,形成了一个完整的闭环系统。 数据采集单元:这是系统的“眼睛”,

Hadoop企业开发案例调优场景

需求 (1)需求:从1G数据中,统计每个单词出现次数。服务器3台,每台配置4G内存,4核CPU,4线程。 (2)需求分析: 1G / 128m = 8个MapTask;1个ReduceTask;1个mrAppMaster 平均每个节点运行10个 / 3台 ≈ 3个任务(4    3    3) HDFS参数调优 (1)修改:hadoop-env.sh export HDFS_NAMENOD

使用SecondaryNameNode恢复NameNode的数据

1)需求: NameNode进程挂了并且存储的数据也丢失了,如何恢复NameNode 此种方式恢复的数据可能存在小部分数据的丢失。 2)故障模拟 (1)kill -9 NameNode进程 [lytfly@hadoop102 current]$ kill -9 19886 (2)删除NameNode存储的数据(/opt/module/hadoop-3.1.4/data/tmp/dfs/na

Hadoop数据压缩使用介绍

一、压缩原则 (1)运算密集型的Job,少用压缩 (2)IO密集型的Job,多用压缩 二、压缩算法比较 三、压缩位置选择 四、压缩参数配置 1)为了支持多种压缩/解压缩算法,Hadoop引入了编码/解码器 2)要在Hadoop中启用压缩,可以配置如下参数

Makefile简明使用教程

文章目录 规则makefile文件的基本语法:加在命令前的特殊符号:.PHONY伪目标: Makefilev1 直观写法v2 加上中间过程v3 伪目标v4 变量 make 选项-f-n-C Make 是一种流行的构建工具,常用于将源代码转换成可执行文件或者其他形式的输出文件(如库文件、文档等)。Make 可以自动化地执行编译、链接等一系列操作。 规则 makefile文件

使用opencv优化图片(画面变清晰)

文章目录 需求影响照片清晰度的因素 实现降噪测试代码 锐化空间锐化Unsharp Masking频率域锐化对比测试 对比度增强常用算法对比测试 需求 对图像进行优化,使其看起来更清晰,同时保持尺寸不变,通常涉及到图像处理技术如锐化、降噪、对比度增强等 影响照片清晰度的因素 影响照片清晰度的因素有很多,主要可以从以下几个方面来分析 1. 拍摄设备 相机传感器:相机传

csu 1446 Problem J Modified LCS (扩展欧几里得算法的简单应用)

这是一道扩展欧几里得算法的简单应用题,这题是在湖南多校训练赛中队友ac的一道题,在比赛之后请教了队友,然后自己把它a掉 这也是自己独自做扩展欧几里得算法的题目 题意:把题意转变下就变成了:求d1*x - d2*y = f2 - f1的解,很明显用exgcd来解 下面介绍一下exgcd的一些知识点:求ax + by = c的解 一、首先求ax + by = gcd(a,b)的解 这个

hdu1394(线段树点更新的应用)

题意:求一个序列经过一定的操作得到的序列的最小逆序数 这题会用到逆序数的一个性质,在0到n-1这些数字组成的乱序排列,将第一个数字A移到最后一位,得到的逆序数为res-a+(n-a-1) 知道上面的知识点后,可以用暴力来解 代码如下: #include<iostream>#include<algorithm>#include<cstring>#include<stack>#in

zoj3820(树的直径的应用)

题意:在一颗树上找两个点,使得所有点到选择与其更近的一个点的距离的最大值最小。 思路:如果是选择一个点的话,那么点就是直径的中点。现在考虑两个点的情况,先求树的直径,再把直径最中间的边去掉,再求剩下的两个子树中直径的中点。 代码如下: #include <stdio.h>#include <string.h>#include <algorithm>#include <map>#