用于桌面和移动设备的 Bootstrap 响应式排版答案

【问题标题】：Bootstrap responsive typography for desktop and mobile用于桌面和移动设备的 Bootstrap 响应式排版
【发布时间】：2019-04-15 14:48:55
【问题描述】：

我正在尝试正确设置我的 Bootstrap 4 字体大小，以便我的 Web 应用程序在移动设备（如手机或平板电脑）和桌面系统（如任何安装了 Chrome 或 Firefox 的 Linux、Mac、Windows ）上看起来不错。现在，无论我在哪里读到响应式排版，手册都在谈论一个简单的过程，但老实说，我很难让它看起来像我需要的那样，因为我对 SASS 和 Bootstrap 4 还很陌生。

我从Bootstrap 4 docs 复制了设置，这是我的 Web 应用程序的主 SASS (style/app.global.scss) 文件中的结果：

@import "~bootstrap/scss/bootstrap";

@include media-breakpoint-down(md) {
    html {
        font-size: 3rem;
    }
}

Bootstrap 4 的默认字体大小是 <html> 元素上的 16px，这没问题。但在我的手机上（三星 Galaxy s8），由于每平方英寸的密集像素，16px 几乎无法读取。所以我把它移到了3rem。到这里为止，行为符合预期。

但是，如果我将 MacBook Pro 上的 Chrome 浏览器窗口缩小到比992px 更小的宽度，则会出现不想要的副作用，3rem 的移动尺寸就会出现，并且我会出现巨大的字母。

不过，我想要实现的是，在桌面上始终使用与16px 相同的字体大小，并且在缩小浏览器窗口时不会跳转到更大的字体大小。

一般来说，有没有办法区分移动设备和桌面设备？ Bootstrap 4 文档在移动和桌面上看起来很棒，如果我将 Chrome 浏览器窗口缩小到更小的宽度，字母仍然保持在相同的大小内。 SASS中是否有专门的命令？

index.html：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Hello React!</title>
    </head>
    <body>
        <div id="app"></div>
    </body>
</html>

还有 index.tsx：

import "bootstrap";
import "./style/app.global.scss";
import * as React from "react";
import * as ReactDOM from "react-dom";

import { Site } from "./components/Site";
import { Title } from "./components/Title";

ReactDOM.render(
    <Title titleName="MySite" />,
    document.getElementsByTagName("title")[0]
);

ReactDOM.render(
    <Site siteName="MySite" />,
    document.getElementById("app")
);

【问题讨论】：

标签： twitter-bootstrap fonts sass responsive-design bootstrap-4

【解决方案1】：

我有几个建议。

(1) 作为一般规则，如果您想要响应式字体大小，请考虑使用 vw 的视口宽度单位作为字体大小，如果这样做，字体大小将随视口或窗口大小。

为了补偿移动设备上的字体太小，使用 calc() 实质上添加最小字体大小

这是一个例子：
CSS

html { font-size: calc(1em + 1vw); }

view this live

在本例中，我将大小应用于 html 元素，您当然可以将类似的内容应用于页面上的标题或其他选择器。

(2) 至于您描述的手机字体太小的具体问题，我首先怀疑是因为您忘记在文档头部包含视口元标记。请尝试这样的事情，看看是否有帮助：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />  
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Hello React!</title>
    </head>
    <body>
        <div id="app"></div>
    </body>
</html>

祝你好运！

【讨论】：

谢谢你，大卫！添加元标记<meta name="viewport" content="width=device-width, initial-scale=1"> 解决了所有问题。很高兴知道这是另一个影响领域。一个人永远学不会！再次感谢！

【解决方案2】：

有几种方法可以做到这一点，我将在这里展示两种方法。

第一个，可能是最喜欢的一个。使用媒体查询：

    /* Small devices (Phones, 600pxand down) -- this would display the text at 5.0rem on phones */

@media only screen and (max-width: 600px) {
    h1 {
        font-size: 5.0rem; // you can also use px here...
    }
}


/* Large devices (laptops/desktops, 992px and up) -- This would display the text at 10.0rem on laptops and larger screens */

@media only screen and (min-width: 992px) {
    h1 {
        font-size: 10.0rem; // you can also use px here...
    }
}

另一个选项 - 它几乎只是放大和缩小您的文本：

h1{
 font-size: 10vw;
}

【讨论】：