font-size: calc()使字体响应-这是一个好主意

Question

我最近偶然发现了使用calc()使font-size响应更快的技巧。它非常简单，而且据我所见，浏览器支持得很好(IE总是需要一点爱)。

body {
  background-color: #434343;
  color: #eee;
  font-family: 'Roboto Slab';
}
.container {
  padding: 4vw;
}
h1 {
  font-size: calc(24px + 3vw);
}
h2 {
  font-size: calc(20px + 3vw);
}
h3 {
  font-size: calc(16px + 2vw);
}
p {
  font-family: Roboto;
  font-size: calc(12px + 1vw);
}
p.hammer {
  font-size: calc(12px + 1.5vw);
}

<div class="container">
  <h1>This is my main header</h1>
  <h2>This is my subheader</h2>
  <h3>This is my section header</h3>
  <p class="hammer">This is my intro hammer. Wooo.</p>
  <p>This is just a normal paragraph. Calc() is fun and by combining px and vw we can have neat responsive font sizes without too many media queries.</p>
  <p><a href="http://codepen.io/MarkBuskbjerg/pen/QGLepo">To see this applied to a dummy article click here</a> (Opens a new Pen)</p>
</div>

注意调整屏幕大小以查看其运行

Trick显然自2012年以来一直存在。然而，我几乎从来没有在实际的网站上看到过这种情况。

从我的角度来看，它节省了很多媒体查询的麻烦，并减少了CSS。

这种方法是否有我忽略的缺点，因为我几乎从未见过它被使用?

Answer 1

请看https://www.smashingmagazine.com/2016/05/fluid-typography。

我做了一个基于Smashing杂志文章的演示，使用CSS自定义属性(CSS变量)轻松控制最小和最大字体大小。

一样:

* {
  /* Calculation */
  --diff: calc(var(--max-size) - var(--min-size));
  --responsive: calc((var(--min-size) * 1px) + var(--diff) * ((100vw - 420px) / (1200 - 420))); /* Ranges from 421px to 1199px */
}
h1 {
  --max-size: 50;
  --min-size: 25;
  font-size: var(--responsive);
}
h2 {
  --max-size: 40;
  --min-size: 20;
  font-size: var(--responsive);
}