时间戳

首页 > 解决方案 > 更改相对于上一个类的字体大小

html - 更改相对于上一个类的字体大小

问题描述

我有这个接受任何类名的组件。为此，我希望添加另一个类，这会使项目缩小 % 说 90%。我如何做到这一点。

<span class="specified_class my_added_class" ></span>

问题是我的班级替换了现有班级的字体大小（这是预期的）。相反，我希望它考虑到这一点。

我想过使用 transform:scale 来实现相同的效果，但它不适用于内联元素，我不能让它成为内联块

标签： htmlcss

解决方案

我会em在这种情况下使用该装置。em 是一个相对单位，1em 表示使用我最近的父母设置的当前字体大小。你可以在你的组件中使用它，这样传入的 prop 就像一个乘数一样。

没有 JS 解决方案

<style>
.specified_class {
font-size: 10px; // Controles the size
}

.sz-default{
  font-size: 1.0em
}

.sz-third{
  font-size: .3em;
}

.sz-half{
  font-size: .5em;
}

.sz-double{
  font-size: 2em;
}

.sz-triple{
  font-size: 3em;
}
</style>
<span class="specified_class sz-triple">I am 30px</span><br>
<span class="specified_class sz-double">I am 20px</span><br>
<span class="specified_class sz-default">I am 10px</span><br>
<span class="specified_class sz-half">I am 5px</span>

反应解决方案

  1. 一、设置em值

将 html 包裹在另一个 div 标签中并添加内联样式，强制其像素大小为 0.1px。

  1. 使用道具设置字体大小

现在在您的模板中，您可以传入将用于更改字体大小的道具。（不要忘记设置一个默认值，以防您忘记传递道具。

例子

export const myTemplate = props => {

const default = "100em"; // sets default font-size to 10px.

const size = {font-size: `${props.size}em`} || default;

return(
  <div style={{font-size: "0.1px"}}>
    <span class="specified_class" style=size></span> 
  </div> 
 )
}

export const myTemplate

推荐阅读