如何在css中获取当前文本大小

Question

我想写一个css,我可以把所有字符串增加这些字符串大约3px.我不知道怎么能这样做,我觉得这样的事情:

.increaseSize {
getSize()+3px;
}

有人可以帮帮我吗？

Answer 1

我会寻求一种不同的,更简单的方法.

p.myText {
  font-size: 16px;
}

.increaseSize {
  font-size: 1.5em
}

<p class="myText">This is some standard text and <span class="increaseSize">this is a bigger font size text</span></p>

这将使任何.increaseSize元素字体大小比其父元素大50%.

您可以使用calc()但可能是浏览器兼容性问题.这是一种更安全的解决方案.

这对你有帮助吗？

Answer 2

您可以像下面的示例一样使用它:

div {
  font-size: 1em;
}
span.increase {
  font-size: calc(100% + 3px);
}

<div>
  Hello <span class="increase">World</span>
</div>

使用该%单位,您可以获得元素的实际字体大小.现在您可以使用calc(浏览器兼容性)添加3px到当前font-size.

你不应该font-size自己计算响应式网页设计.您可以/应该使用相关单位em,rem或者%实现响应font-size.