适用于台式机和移动设备的Bootstrap响应式排版

时间:2018-11-12 20:32:53

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

我正在尝试正确设置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")
);

2 个答案:

答案 0 :(得分:2)

我有几点建议。

(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>    

祝你好运!

答案 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;
}