Question

我最近偶然发现了使用calc（）来提高字体大小响应速度的提示。它非常简单，据我所知，浏览器支持得很好（IE需要一如既往的爱）。

＆＃13;

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);
}

＆＃13;

<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>

＆＃13;

注意调整屏幕大小以查看其效果。

自2012年以来，Trick显然已经存在。但是我几乎从未在现场网站上看到这一点。

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

我缺少这种方法的缺点，因为我几乎从未见过它？

Answer 1

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

我使用CSS自定义属性（CSS变量）基于Smashing Magazine文章制作了demo，以便轻松控制最小和最大字体大小。

像这样：

* {
  /* 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);
}

font-size：calc（）使字体响应 - 这是一个好主意吗？

1 个答案: