在更新浏览器字体大小时，字体大小不会更改。

Question

我在我的页面中使用了基于em和rem的大小来根据浏览器的字体大小进行缩放。但是，当我更改浏览器字体时，什么都不会发生。当我检查大小的计算值时，无论浏览器的字体大小如何，它总是将1em引用到10 is 。我使用引导程序，它将基本字体大小设置为浏览器字体大小的62.5%，即10 is 。但是，当浏览器的字体大小增加时，它也应该增加。我的代码如下：

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>

image.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;
}

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

Answer 1

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

body {
    font-size: 14px;
}

Answer 2

em和rem字体大小相对于元素父级(em)和html字体大小(rem).在某些引导模板中，默认情况下，html和body字体大小以像素为单位。因此，如果您希望它尊重浏览器的字体大小，则必须将其更改为相对值。

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

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

Answer 3

*{
font-size=anyvalue!important:
}

只要加上！对价值很重要