迹忆客 专注技术分享

当前位置:主页 > 学无止境 > WEB前端 > CSS >

在 CSS 中创建响应式字体

作者:迹忆客 最近更新:2023/03/24 浏览次数:

这篇文章解释了仅使用 CSS 实现响应式字体的方法。我们将介绍现代 CSS 和 CSS3 如何使字体在不同屏幕尺寸的设备上看起来可读的几种方法。


在 CSS 中使用视口值创建响应式字体

使字体响应的最简单方法之一是根据视口的大小或浏览器的窗口大小调整字体大小。CSS 提供了与浏览器窗口轴相关的各种视口单位,它们在制作响应式网页时非常有用。一些视口单位是 vwvhvminvmax。我们可以从 CSS 单位中获取这些单位的信息。我们可以使用这些视口单位而不是 empxpt 来制作响应式字体。

例如,创建每个 h1h2p 标签。在这些标签之间写一些你选择的文本。在 CSS 中,将 h1h2p 标签的 font-size 属性分别设置为 5.9vw3.0vh2vmin

当我们调整浏览器的大小时,浏览器的视口会发生变化,文本的字体大小也会随之发生变化。这样,我们就可以使用字体大小中的视口单位在 CSS 中创建响应式字体。

示例代码:

<h1> Hey boy </h1>
<h2> Hey girl </h2>
<p> Hey kid </p>
h1 {
    font-size: 5.9vw;
}
h2 {
    font-size: 3.0vh;
}
p {
    font-size: 2vmin;
}

在 CSS 中使用媒体查询创建响应式字体

我们可以使用媒体查询在 CSS 中创建响应式字体。我们还可以利用媒体查询来更改设备特定高度/宽度的字体大小。我们使用@media 关键字来编写媒体查询。

例如,将 font-size 属性设置为 3em。接下来编写条件为 max-width:320px 的媒体查询。然后,将 font-size 属性设置为 2em

示例代码:

body{
    font-size: 3em;
}
@media only screen and (max-width: 320px) {
    body {
        font-size: 2em; 
    }
}
<h1> Hey boy </h1>
<h2> Hey girl </h2>
<p> Hey kid </p>

在这里,当上面的代码被实现并在屏幕尺寸小于 320px 的设备上运行时,字体大小会减小。对于高度低于 320px 的设备,字体设置为 2em。对于屏幕尺寸大于 320px 的设备,字体将为 3em

这种方法的缺点是,如果设计开始破坏具有特定尺寸的设备,我们可能需要添加更多媒体查询。


在 CSS 中使用 calc() 函数创建响应式字体

由于现在大多数现代浏览器都支持 CSS 中的 calc() 方法,这使得编写响应式代码变得更加容易。此外,这种方法也更有效,可以在不使代码混乱的情况下完成任务。我们可以使用 calc() 函数使字体大小响应。函数的结果是属性的值。

例如,将 body 标签的 font-size 属性设置为 calc() 函数。在函数内部,写 0.75em + 1vw

示例代码:

body {
    font-size: calc(0.75em + 1vw);
}
<h1> Hey boy </h1>
<h2> Hey girl </h2>
<p> Hey kid </p>

字体大小会随着 1vw 值在不同屏幕尺寸的设备上的变化而变化。因此,我们可以在 CSS 中创建响应式字体。


在 CSS 中使用 clamp() 函数创建响应式字体

clamp() 函数将值夹在最大值和最小值之间。该函数接受三个参数作为参数,第一个是最小值,第二个是首选值,最后一个是最大允许值。我们可以使用 clamp() 函数来设置任何属性,例如 lengthanglepercentagenumber 等。我们可以使用该函数在 CSS 中制作响应式字体。

示例代码:

h1{
    font-size : clamp(2rem, 10vw, 5rem);
}
<h1> Hey boy </h1>
<h2> Hey girl </h2>
<p> Hey kid </p>

在上面的示例中,值 2rem 是允许的最小字体大小。同样,下一个值 10vw 是默认字体大小,最后一个值 5rem 是允许的最大字体大小。在这里,我们需要注意中间的值应该是相对的,如 vwchvh,而不是绝对的,如 pxpt

转载请发邮件至 1244347461@qq.com 进行申请,经作者同意之后,转载请以链接形式注明出处

本文地址:

相关文章

覆盖 Bootstrap CSS

发布时间:2023/04/28 浏览次数:59 分类:CSS

本文介绍的是著名的 CSS UI 框架 Bootstrap。 我们将讨论使用自定义样式覆盖 Bootstrap CSS 的过程。

使用 CSS 制作带圆角的 HTML 表格

发布时间:2023/04/28 浏览次数:107 分类:CSS

这个简短的文章是关于在 HTML 页面上制作圆角表格的 CSS 样式。使用 CSS 制作带圆角的 HTML 表格 使图像、表格或 div 段的角变圆的属性是 border-radius。

CSS 设置轮廓 outline 的半径

发布时间:2023/04/28 浏览次数:123 分类:CSS

在本文中,用户将学习如何为 outline 属性设置圆角,与 border-radius 属性相同。 在这里,我们已经解释了将圆角应用于轮廓属性的不同方法。

使用 CSS 居中视频

发布时间:2023/04/28 浏览次数:73 分类:CSS

在本文中,用户将学习仅使用 CSS 将 <video> 元素居中。 我们已经在下面解释了使用 CSS 使视频居中的多种方法。

使用 CSS 居中内联块

发布时间:2023/04/28 浏览次数:108 分类:CSS

在本文中,我们将创建多个 HTML 元素并将其显示设置为 inline-block。 之后,我们将学习使用 display: inline-block 将所有元素居中。

使用 CSS 添加透明边框

发布时间:2023/04/28 浏览次数:98 分类:CSS

在本文中,我们将讨论在 HTML 中的图像、按钮或任何其他对象周围创建透明边框。 透明边框是图像或对象周围的边框,可改善用户体验。

使用 CSS 向上移动文本

发布时间:2023/04/28 浏览次数:153 分类:CSS

有时,在开发网页时,我们将文本放在底部或页脚中,因此我们可能需要在文本下方留一个空格并将文本上移。 我们将学习如何使用 css 从网页底部向上移动文本。

CSS 防止文本选择

发布时间:2023/04/28 浏览次数:75 分类:CSS

在本文中,我们讨论了防止文本选择和使用具有 none 值的 user-select 属性。 此外,您还将了解如何为不同的 Web 浏览器使用该属性。

扫一扫阅读全部技术教程

社交账号
  • https://www.github.com/onmpw
  • qq:1244347461

最新推荐

教程更新

热门标签

扫码一下
查看教程更方便