如何在 laravel 的welcome.blaze.php 中使字体大小响应？

Question

这就是“LaravelProject”这个词及其链接在大屏幕上的样子，我喜欢这样，到处都是空间

---

这是一个新创建的 Laravel 项目在小屏幕上的样子

---

如果你把“Laravel”换成“LaravelProject”，你甚至无法在小屏幕上看到所有的字母；单词下方的链接也可以在它们之间获得更多空间，并从 3 行折叠到 2 行链接

---

这个 laravel 项目使用的是 bootstrap 和 vue，不过，由于我对 ui、vue 和 bootstrap 很陌生，我不知道如何解决问题，这是“LaravelProject”的代码来源

<div class="content">
    <div class="title m-b-md">
        LaravelProject
    </div>
<div class="navbar-brand">
    <div>

    </div>
</div>

<div class="links">
    <a href="https://laravel.com/docs">Docs</a>
    <a href="https://laracasts.com">Laracasts</a>
    <a href="https://laravel-news.com">News</a>
    <a href="https://blog.laravel.com">Blog</a>
    <a href="https://nova.laravel.com">Nova</a>
    <a href="https://forge.laravel.com">Forge</a>
    <a href="https://vapor.laravel.com">Vapor</a>
    <a href="https://github.com/laravel/laravel">GitHub</a>
</div>

---

这些是content、title和m-b-md的样式定义

.title {
    font-size: 84px;
}

.content {
    text-align: center;
}

.m-b-md {
    margin-bottom: 30px;
}

如何使用 vue/bootstrap 使该字体根据 laravel 中的屏幕尺寸进行缩放？如果有 100 个字母，那么在大屏幕等方面也可以扩展吗？如果这是一个非常菜鸟的问题，我很抱歉，我对 .net 框架之外的 Web 开发真的很陌生！我想根据它的工作原理来提高我的理解，到目前为止我读到的所有东西对我来说似乎都太技术化了，而且太面向其他技术了，至少我在搜索有关如何解决这个问题的信息时是这么想的。

Answer 1

如果你想让文本尽可能大，没有javascript你就做不到。有这个插件，例如 https://brorlandi.github.io/big-text.js/ 和至少另一个我找不到的插件。

如果你希望文本不是尽可能大，而是简单的“大屏幕”，你需要使用一个绑定到容器块大小的单位（例如百分比）甚至屏幕（vw， vh) 或浏览器设置（通常为 rem）。

1 vw = “视图”宽度的 1%。

1 rem = 1 x 根元素的默认字体大小。

如果您想要根据屏幕是大屏幕、中屏幕还是小屏幕进行更多自定义，您将需要媒体查询。这就是引导程序正在使用的，但我认为单独的引导程序不会让你这样做。很简单，有相关的课程，比如https://www.w3schools.com/css/css3_mediaqueries_ex.asp

它会让你有一个文本，大屏幕为 50vw，中屏为 80vh，等等......

我建议你测试每一种可能性，看看哪种更适合你的需要。

Answer 2

试试大众或媒体

.title {
font-size: 8vw;
}
================== OR ====================
@media(min-width: 768px) {
.title {
    font-size: 84px;
}
}
@media(max-width: 768px) {
.title {
    font-size: 40px;
}
}
@media(max-width: 425px) {
.title {
    font-size: 30px;
}
}

Answer 3

当我昨天看到媒体查询时，我可能应该尝试一下（以前从未见过），但它看起来不像是引导程序……我想我太累了，无法尝试，直到 FTW 建议它我几分钟前，然后我想：“让我们试试吧！”。

---

这是代码：我真的很喜欢现在的输出，到目前为止我尝试过的所有屏幕尺寸！

@media (max-width: 575.98px) { 
    .title {
        font-size: 80vw;
    }
}

// Small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) {
    .title {
        font-size: 80vw;
    }
}

// Medium devices (tablets, less than 992px)
@media (max-width: 991.98px) {
    .title {
        font-size: 60vw;
    }
}

// Large devices (desktops, less than 1200px)
@media (max-width: 1199.98px) {
    .title {
        font-size: 40vw;
    }
}

// Large devices (desktops, less than 1200px)
@media (max-width: 2000.98px) {
    
}