我正在尝试正确设置Bootstrap 4字体大小设置,以便在移动设备(如手机或平板电脑)和台式机系统(如安装了Chrome或Firefox的任何Linux,Mac,Windows)上显示良好的Web应用程序。现在,到处都是关于响应式排版的文章,手册中谈到了简单过程,但是老实说,由于我对SASS和Bootstrap 4还是很陌生,因此很难获得所需的外观。< / p>
我从Bootstrap 4 docs复制了设置,这是我的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")
);
答案 0 :(得分:2)
我有几点建议。
(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>
祝你好运!
答案 1 :(得分:1)
有两种方法可以做到这一点,在这里我将展示两种方法。
第一个,可能是最喜欢的一个。使用媒体查询:
/* 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;
}