🌉 🏴‍☠️ ☀️ 响应字体。在布局和最小值之间调整文本 👩‍👧‍👧 🕸️ 👵

响应式或响应式字体是任何Web开发人员的梦想。我在晚上审查了许多实施方案，并提出了可靠的工作方案。我想和你分享。额外的SCSS Mixin！

因此，挑战。根据布局指示该值，以及在移动设备（例如iPhone 5（320像素））上文本或标题看起来不错的最小值。在这种情况下，字体将根据屏幕的宽度进行调整，增加或减少。

我们从布局中获取初始值，例如大小为40px的H1标头。我们还需要整个画布布局的宽度，例如1280px。

为了获得最小的字体值，我们根据布局组成标题，然后使用Chrome开发者工具（F12）选择所需的最小屏幕尺寸并选择字体大小，然后更改该值直到文本看起来合适为止。之后我

在CSS中得到了24px ，而不是font-size：40px;写以下内容。

font-size: calc(24px + 16 * (100vw / 1280));

其中24px是我们的最小字体，16是布局40中的字体与24中的最小字体之差（40-24 = 16）。 100vw是视口（屏幕）的当前全部宽度； 1280是布局的宽度。

我们测试并获得了与字体大小完全匹配的自适应字体。

但是，在320px的大小下，我们将看不到所需的结果，即24px字体。这是由于我们没有将最小屏幕尺寸指定为正好320像素。

为了解决这种情况，我们编写一个767px的媒体请求，然后在内部更改公式：

@media (min-width: 767px){
 h1 {
  font-size: calc(24px + (16 + 16 * 0.7) * ((100vw - 320px) / 1280));
 }
}

下面我们就从视口的整个宽度减去320像素，以及增加16额外数量我们增加70％（16 + 16 * 0.7）。我们

检查，看到了完全符合任务！同时，无缝过渡到断点并不明显！

当然，我们可以在SCSS mixin中关闭所有这些：

$maxWidth: 1280;
@mixin adaptiv-font($pcSize, $mobSize) {
	$addSize: $pcSize - $mobSize;
	$addMobSize: $addSize + $addSize * 0.7;
	@media (max-width: 767px) {
		font-size: calc(#{$mobSize + px} + #{$addMobSize} * ((100vw - 320px) / #{$maxWidth}));
	}
	@media (min-width: 767px) {
		font-size: calc(#{$mobSize + px} + #{$addSize} * (100vw / #{$maxWidth}));
	}
}

并如下连接：

h1{
 @include adaptiv-font(40, 24);
}

您可以完全摆脱媒体查询：

$maxWidth: 1280;
@mixin adaptiv-font($pcSize, $mobSize) {
	$addSize: $pcSize - $mobSize;
	$maxWidth: $maxWidth - 320;
	font-size: calc(#{$mobSize + px} + #{$addSize} * ((100vw - 320px) / #{$maxWidth}));
}

我将很高兴在评论中阅读如何进一步改进此解决方案。感谢您的关注！

基于视频“ 自适应字体 ”中的材料。在CSS + SCSS mixin上实现响应（橡胶）字体的示例 “在YouTube频道“ Freelancer for Life ”上

响应字体。在布局和最小值之间调整文本

More articles: