如何用css有效地编写100%响应的字体大小在本教程中，你将学习如何使字体在手机、桌子和桌面上响应。要做到100%的响

在本教程中，你将学习如何使字体在手机、桌子和桌面上响应。

要做到100%的响应，每个显示的元素都应该在屏幕分辨率下如期工作。这有助于用户在不同的屏幕和设备尺寸下阅读文本。

字体设计是改善用户体验的一个重要方面。在CSS中，字体大小可以使用固定大小（以像素为单位）或相对单位（百分比、EM、REM、VW、VH、VMIN、VMAX）进行配置。

在任何应用程序中，字体大小都适用于以下项目

主体
输入元素
标题，如h1,h2
段落让我们来看看桌面或网络应用的普通css字体大小的例子

body{
    font-size:14px;
}

h1{
    font-size:24px;
}
h2{
    font-size:20px;
}
h3{
    font-size:16px;
}

正如你所看到的，普通文本被声明为14px，标题标签被定义为不同的像素。

它在桌面和移动设备上运行良好，但字体大小看起来超过了预期的大小。

这意味着我们必须根据屏幕分辨率和设备顶部动态地改变文字大小。

我们有多种方法可以使字体大小具有响应性

一种方法是使用视口高度和宽度，另一种方法是使用媒体查询。

视口尺寸

有多种视口尺寸，也叫相对单位

1vw - 总设备视口宽度的1% 1vh - 总设备视口高度的1% 1vmin - 在1vw或1vh中较小 1vmax - 在1vw或1vh中较大 % - 屏幕分辨率的百分比 EM - 是基本字体大小的相对尺寸 REM - 与根基本字体大小的相对尺寸

你可以使用这些相对单位中的任何一个来应用样式。

body{
    font-size:16px;
}

h1{
    font-size:3rem;
}
h2{
    font-size:2.5rem;
}
h3{
    font-size:2rem;
}

媒体查询有助于根据最小和最大屏幕分辨率来应用样式。

在这个例子中，台式机的基本字体大小是20px

对于设备宽度为720px、640px、320px等，则改为18px、16px、14px。

下面是一个简单的演示，说明媒体查询如何使字体具有响应性。

body {
    font-size: 20px;
}

@media all and (max-device-width: 720px){
    body {
        font-size: 18px;
    }
}

@media all and (max-device-width: 640px){
    body {
        font-size: 16px;
    }
}

@media all and (max-device-width: 320px){
    body {
        font-size: 14px;
    }
}

你可以将这些值改为固定像素或相对单位。

CSS响应式字体大小的最佳实践和指南

始终使用动态的相对单位，如百分比(%)、EM、REM vw vh，避免使用固定的像素尺寸。
如果需要的话，使用媒体查询来支持所需的最小和最大字体大小。
在正文中应用css适用于整个应用程序或网站，所以正文字体默认应该是16px。这是最主要的字体大小
次要字体或输入形式，如标签和ui元素，默认应该是12或14px。
在设计标题文字时，一定要有层次感，如h1为30px，h2为25px等等。在桌面用户中，它看起来是可读的，并能改善用户的情绪，同样的方法也适用于移动设备上的相对单位。

如何用css有效地编写100%响应的字体大小

视口尺寸

CSS响应式字体大小的最佳实践和指南

总结