将某个元素内的每个元素的字体大小增加 1px

Question

有没有一种方法可以将 .wrap 中每个元素的当前字体大小增加 1px，而无需手动操作？

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

Answer 1

除非您使用相对值（如 em）然后将字体大小设置为 body，否则无法使用普通 CSS 执行此操作。这样做是创建一个标准字体大小（无论您在 body 上设置什么大小），然后将其乘以您在嵌套 CSS 中设置为 em 值的任何值。比如你把body设置成font-size: 16px;，然后把其他都设置成1em（同16px）或者2em（32px）等等，你就可以控制这个只需更改 body.

上的 font-size 即可

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 添加到所有字体大小。我们这样做的方法是在 sheet 上的 SASS 变量中用我们的设计语言定义所有字体大小，我们使用它来导入构建模块的所有 .scss 文件。我们有两个这样的 sheet：每个环境一个。具有 "font-sizes +1" 的环境的 sheet 只是将所有字体大小变量设置为“+1”值。

Answer 2

只需使用一个 SASS 变量，如下所示：

$var: 1px;

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

将某个元素内的每个元素的字体大小增加 1px

Adding 1px to font size of every element inside a certain element

css

sass

font-size