Question

我在页面中使用了基于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>

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）而言的。在某些Bootstrap模板html和body中，字体大小默认设置为像素。因此，如果要尊重浏览器的字体大小，则必须将其更改为相对值。

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

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

Answer 3

<base href="/public">

只需在值上添加！important

Answer 4

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

字体大小在更新浏览器字体大小时未更改

4 个答案: