您可以使用新的CSS单位vw，vh（视口宽度/高度）来实现此目的。
这是一篇有趣的css-tricks文章，向您展示如何在排版中使用它们。
示例：（来自上述文章）
h1 {
font-size: 5.9vw;
}
h2 {
font-size: 3.0vh;
}
p {
font-size: 2vmin;
}
因此，h1将具有视口宽度的5.9％的字体大小，以此类推。
话虽如此，在上述方式中使用视口单位作为font-size是有问题的，因为当视口宽度非常窄时，呈现的字体大小会变得太小，反之亦然。
为了解决这个问题，我建议使用一种称为流体类型或CSS锁定的技术。
CSS锁定是一种特定的CSS值计算，其中:
- 有一个最小值和一个最大值，
- 两个断点（通常基于视口宽度），
- 在这些断点之间，实际值从最小值线性地增加到最大值。
(参见关于CSS锁定的这篇文章，其中还详细说明了所涉及的数学知识。)
假设我们想应用上述技术，使最小字号为16px，当视口宽度小于或等于600px时，将线性增加到最大32px，在1200px的视口宽度下达到最大值。
我们可以使用此SASS mixin，它会为我们执行所有数学计算，以便CSS看起来像这样:
div {
@include fluid-type(font-size, 600px, 1200px, 16px, 32px);
}
@media screen and (max-width: 600px) {
div {
font-size: 16px;
}
}
@media screen and (min-width: 1200px) {
div {
font-size: 36px;
}
}
// ----
// libsass (v3.3.6)
// ----
// =========================================================================
//
// PRECISE CONTROL OVER RESPONSIVE TYPOGRAPHY FOR SASS
// ---------------------------------------------------
// Indrek Paas @indrekpaas
//
// Inspired by Mike Riethmuller's Precise control over responsive typography
// http://madebymike.com.au/writing/precise-control-responsive-typography/
//
// `strip-unit()` function by Hugo Giraudel
//
// 11.08.2016 Remove redundant `&` self-reference
// 31.03.2016 Remove redundant parenthesis from output
// 02.10.2015 Add support for multiple properties
// 24.04.2015 Initial release
//
// =========================================================================
@function strip-unit($value) {
@return $value / ($value * 0 + 1);
}
@mixin fluid-type($properties, $min-vw, $max-vw, $min-value, $max-value) {
@each $property in $properties {
#{$property}: $min-value;
}
@media screen and (min-width: $min-vw) {
@each $property in $properties {
#{$property}: calc(#{$min-value} + #{strip-unit($max-value - $min-value)} * (100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)});
}
}
@media screen and (min-width: $max-vw) {
@each $property in $properties {
#{$property}: $max-value;
}
}
}
// Usage:
// ======
// /* Single property */
// html {
// @include fluid-type(font-size, 320px, 1366px, 14px, 18px);
// }
// /* Multiple properties with same values */
// h1 {
// @include fluid-type(padding-bottom padding-top, 20em, 70em, 2em, 4em);
// }
////////////////////////////////////////////////////////////////////////////
div {
@include fluid-type(font-size, 600px, 1200px, 16px, 32px);
}
@media screen and (max-width: 600px) {
div {
font-size: 16px;
}
}
@media screen and (min-width: 1200px) {
div {
font-size: 36px;
}
}
<div>Responsive Typography technique known as Fluid Type or CSS Locks.
Resize the browser window to see the effect.
</div>
进一步阅读
精确控制响应式排版
使用CSS Poly Fluid Sizing实现流体响应式排版
CSS中的非线性插值
$("*")来选择所有元素，但我强烈建议使用屏幕尺寸相关的单位，如em，这样它就完全基于 CSS。 - Reinstate Monica Cellio