如何让font-size影响图标rem值？求原因及实现方法

问题原因 #

你给.big设置的font-size:125%不会影响图标尺寸，因为图标所有尺寸用的是rem单位——rem的计算只和根元素（<html>）的font-size挂钩，和元素自身或父元素的font-size无关。所以修改.big的font-size对基于rem的图标尺寸没有任何作用。

正确实现方式 #

方法1：改用em单位 #

em单位是相对于当前元素（或父元素）的font-size计算的，把图标里的rem替换成em，父元素的font-size就能直接影响图标大小：

body {font-family: sans-serif;height: 100vh;margin: 0;display: grid;place-items: center;}
.big {font-size:125%;}
/* 修正原代码里的translate语法错误 */
.middle-text {position:absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}
.gg-mail,.gg-mail::after {display: block;box-sizing: border-box;height: 1.4em;border: 0.2em solid}
.gg-mail {overflow: hidden;transform: scale(var(--ggs,1));position: relative;width: 1.8em;border-radius: 0.2em}
.gg-mail::after {content: "";position: absolute;border-radius: 0.3em;width: 1.4em;transform: rotate(-45deg);bottom: 0.3em;left: 0}

方法2：用CSS变量关联尺寸控制 #

自定义变量绑定图标所有尺寸，通过父元素修改变量值调整大小：

html {font-size: 62.5%;}
body {font-family: sans-serif;height: 100vh;margin: 0;display: grid;place-items: center;}
/* 自定义变量控制图标基准尺寸 */
.big {--icon-base: 1.25rem;}
.middle-text {position:absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}
.gg-mail,.gg-mail::after {display: block;box-sizing: border-box;height: calc(1.4 * var(--icon-base, 1rem));border: calc(0.2 * var(--icon-base, 1rem)) solid}
.gg-mail {overflow: hidden;transform: scale(var(--ggs,1));position: relative;width: calc(1.8 * var(--icon-base, 1rem));border-radius: calc(0.2 * var(--icon-base, 1rem))}
.gg-mail::after {content: "";position: absolute;border-radius: calc(0.3 * var(--icon-base, 1rem));width: calc(1.4 * var(--icon-base, 1rem));transform: rotate(-45deg);bottom: calc(0.3 * var(--icon-base, 1rem));left: 0}

方法3：利用原生缩放变量 #

原代码已经用到--ggs缩放变量，直接在父元素设置该变量值即可：

body {font-family: sans-serif;height: 100vh;margin: 0;display: grid;place-items: center;}
/* 125%对应缩放倍数1.25 */
.big {font-size:125%;--ggs: 1.25;}
.middle-text {position:absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}
.gg-mail,.gg-mail::after {display: block;box-sizing: border-box;height: 1.4rem;border: 0.2rem solid}
.gg-mail {overflow: hidden;transform: scale(var(--ggs,1));position: relative;width: 1.8rem;border-radius: 0.2rem}
.gg-mail::after {content: "";position: absolute;border-radius: 0.3rem;width: 1.4rem;transform: rotate(-45deg);bottom: 0.3rem;left: 0}

内容的提问来源于stack exchange，提问作者Matan