时间戳

首页 > 解决方案 > 在某个元素内的每个元素的字体大小上添加 1px

css - 在某个元素内的每个元素的字体大小上添加 1px

问题描述

有没有办法将 1px 添加到 .wrap 中每个元素的当前字体大小，而无需手动操作？

 .wrap{
      margin-top: 169px;
      .element1{
       font-size:30px;
      }
      .element2{
       font-size:20px;
      }
    }

标签： csssassfont-size

解决方案

除非您使用相对值（如em）然后将字体大小设置为 ，否则无法使用普通 CSS 执行此操作body。这样做是创建一个标准字体大小（无论您设置什么大小body），然后将其乘以您em在嵌套 CSS 中设置的任何值。例如，如果您设置body为font-size: 16px;，然后将其他所有内容设置为1em（与 16px 相同）或2em（32px）等，您只需更改font-sizeon即可控制此基本尺寸body。

body {
  font-size: 16px;
}

h1 {
  font-size: 2em;  // 16 * 2 = 32px
}

p {
  font-size: 1.5em;  // 16 * 1.5 = 24px;
}

此外，由于您使用的是 SASS，因此您可以为字体大小创建变量，然后更改这些变量。

$font-size-sm: 16px;
$font-size-lg: 32px;

h1 {
  font-size: $font-size-lg;
}

p {
  font-size: $font-size-sm;
}

您还可以对这些变量进行数学运算（如 Matt Fryer 所述），因此如果您不关心在不同字体大小之间保持相同的比例，您可以在技术上将字体大小添加到变量中。（我的意思是 16px / 32px 与 (16px + 1px) / (32px + 1px) 的比率不同。如果您将这些更改放大，您会注意到相对尺寸很不稳定。）

我在一个项目中工作，根据环境，我们将 1px 添加到所有字体大小。我们这样做的方法是在我们用来为构建模块导入所有 .scss 文件的工作表上的 SASS 变量中定义设计语言中的所有字体大小。我们有两张这样的表格：每个环境一张。带有“font-sizes +1”的环境的工作表只是将所有字体大小变量设置为“+1”值。

推荐阅读