Soc*_*tes 0 fonts sass responsive-design twitter-bootstrap bootstrap-4
我正在尝试正确设置 Bootstrap 4 字体大小，以便我的 Web 应用程序在移动设备（如手机或平板电脑）和桌面系统（如安装了 Chrome 或 Firefox 的任何 Linux、Mac、Windows）上看起来不错。现在，无论我在哪里读到响应式排版，手册都在谈论一个简单的过程，但老实说，我发现很难让它看起来像我需要的那样，因为我对 SASS 和 Bootstrap 4 还很陌生。
我从Bootstrap 4 文档中复制了设置，这是我的 Web 应用程序的主 SASS（样式/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")
);
我有几个建议。
(1) 作为一般规则，如果您想要响应式字体大小，请考虑使用vw的视口宽度单位作为字体大小，如果这样做，字体大小将随着视口或窗口大小而缩放。
并且为了补偿移动设备上的字体太小，使用 calc() 基本上添加最小字体大小
这是一个例子：
CSS
html { font-size: calc(1em + 1vw); }
在此示例中，我已将大小应用于 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>
祝你好运！
| 归档时间： |
|
| 查看次数： |
7227 次 |
| 最近记录： |