字体大小不会随着浏览器字体大小的更新而改变答案

【问题标题】：The font-size is not changing on the update of browser font size字体大小不会随着浏览器字体大小的更新而改变
【发布时间】：2019-11-29 15:17:12
【问题描述】：

我在我的页面中使用了基于 em 和 rem 的大小，以使其根据浏览器字体大小进行缩放。但是，当我更改浏览器字体时，什么都没有发生。当我检查大小的计算值时，结果发现它总是将 1em 引用到 10px ，无论浏览器字体大小是什么。我正在使用 Bootstrap，它将基本字体大小设置为浏览器字体大小的 62.5%，即 10px。但是当浏览器字体大小增加时，它也应该增加。我的代码如下：

image.html

<div id="img-container" class="container-fluid" (mouseenter)="displayNav(true)" (mouseleave)="displayNav(false)">
    <div class="row image-header">
        <div class="col-12">
            <h5>Image</h5>
        </div>
    </div>
    <div class="row image-body">
        <div id="img-prev" class="col-2" [ngClass]="{'invisible': !navigationVisible}">
            <button id="btn-prev" (click)="loadImage('prev')"><i class="fa fa-chevron-left fa-3"></i></button>
        </div>
        <div id="img-box" class="col-8">
            <img id="main-img" [src]="imgUrl" class="img-responsive img-thumbnail"/>
        </div>
        <div id="img-next" class="col-2" [ngClass]="{'invisible': !navigationVisible}">
            <button id="btn-prev" (click)="loadImage('next')"><i class="fa fa-chevron-right fa-3"></i></button>
        </div>
    </div>
    <div class="row margin-1 image-footer">
        <div class="col-12 image-meta">
            <span class="like-button margin-2" *ngIf="!like"><i class="fa fa-thumbs-o-up fa-3 margin-2 hover-link" (click)="likeImg()"></i>Like</span>
            <span class="like-button margin-2" *ngIf="like"><i class="fa fa-thumbs-o-down fa-3 margin-2 hover-link" (click)="likeImg()"></i>Unike</span>
            <span class="margin-2">{{likeCount}} liked this</span> 
        </div>
    </div>    
</div>

图像.css

#main-img {
    height: 100%;
    min-height: 100%;
    max-height: 100%;
    max-width: 100%;
    margin: 0em auto;
}

#img-box {
    text-align: center; 
    height: 100%;
    padding: 0em;
}

#img-container {
    font-size: 1rem;
    margin:  0em;
    padding: 0em;
    height: 100%;
}

#img-prev {
    width: 100%;
    text-align: center;
    padding: 0em;
    top: 0;
    bottom: 0;
    margin: auto;
}

#img-next {
    width: 100%;
    text-align: center;
    padding: 0em;
    top: 0;
    bottom: 0;
    margin: auto;
}

.justify-content-flex-end {
    justify-content: flex-end !important;
}

.like-button {
    color: blue;
}

.margin-1 {
    margin: 0.125em;
}

.margin-2 {
    margin: 0.125em;
    font-size: 1em;
}

.hover-link:hover {
    cursor: pointer;
}

.align-items-center {
    align-content: center;
}

.hidden {
    visibility: hidden;
    display: block;
}

.image-header {
    height: 5%;
    text-align: center;
}

.image-body {
    height: 85%;
    max-height: 85%;
    position: relative;
}

.image-footer {
    margin-top: 0.625em; 
    height: 10%;
}

.image-meta {
    margin: 0em auto;
    text-align: center;
}

如果我遗漏了什么，请告诉我。

【问题讨论】：

标签： css twitter-bootstrap

【解决方案1】：

您需要在body 元素上设置基本字体大小。

body {
    font-size: 14px;
}

【讨论】：

【解决方案2】：

*{
font-size=anyvalue!important:
}

只需将 !important 添加到值中

【讨论】：

【解决方案3】：

em 和 rem 字体大小相对于元素父元素 (em) 和 html 字体大小 (rem)。在某些 Bootstrap 模板中，html 和 body 字体大小默认设置为像素。因此，如果您希望它尊重浏览器字体大小，则必须将其更改为相对值。

html {font-size: 1.6em}
body {font-size: 1.4em}

并确保您的自定义 css 文件位于其他文件之后，以覆盖其值

【讨论】：

【解决方案4】：

一旦我从 Bootstrap 3 升级到 Bootstrap 4，问题就解决了。它现在响应不同的浏览器字体大小设置。

【讨论】：