html - ionic : how to set same font in span tag for different resolutions?

Question

我有以下带有内部跨度的 div:

<!-- Debug info -->
        <div class="helperInfo" ng-if="learningModeState == true">
            <span ng-if="activeCandle != null">Active candle : {{activeCandle}} |</span>
            <span ng-if="activeCandle == null">Active candle : 0 |</span>
            <span ng-if="selectedCandle != null">Selected candle: {{selectedCandle}} |</span>
            <span ng-if="selectedCandle == null">Selected candle: None |</span>
            <span>Volume: {{micVolume}} |</span>
            <span>Treshold: {{micTreshold}} |</span>
        </div>

和相关的CSS:

.helperInfo {
    position: absolute;
    width: 100%;
    bottom: 0%;
    height: 8%;
    text-align: center;
}

.helperInfo span {
    font-size: 150%;
    color: #fff;
    text-align: center;
}

问题是字体大小是很好的横向分辨率，大约 640 x 320，但是如果我试图将设备的分辨率设置为 1920 x 1080，我总是得到小于分辨率 640 px 的字体(见下图).

我应该设置什么以获得不同尺寸的相同尺寸和比例？

视口(viewport)设置为:

<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

正文:

body {
    background-color: #000000 !important;
    font-size: 16px;
}

整个模板是:

<ion-view class="gameBgImage" >
    <ion-content ng-init="animateGameScreen()" scroll="false" >

        <!-- Debug info -->
        <div class="helperInfo" ng-if="learningModeState == true">
            <span ng-if="activeCandle != null">Active candle : {{activeCandle}} |</span>
            <span ng-if="activeCandle == null">Active candle : 0 |</span>
            <span ng-if="selectedCandle != null">Selected candle: {{selectedCandle}} |</span>
            <span ng-if="selectedCandle == null">Selected candle: None |</span>
            <span>Volume: {{micVolume}} |</span>
            <span>Treshold: {{micTreshold}} |</span>
        </div>

        <!-- Moving spider on the net -->
        <img id="movingSpiderOnNet" src="img/objects/spiderOne.gif">

        <!-- Moving cloud-->
        <img id="cloudLeftToRightGamePage" src="img/objects/cloud_left_right.png">

        <!-- Spider-->
        <img id="spiderTwo" src="img/objects/spiderOne.gif">

        <!-- START SHRINKING SPIDER NET-->
        <div id="shrinkingSpiderNetTwo">
            &nbsp;
        </div>
        <!-- //END SHRINKING SPIDER NET-->

        <!-- Bat start
        <div id="bat_1">
            &nbsp;
        </div>
-->
        <!-- // Bat end -->


        <!-- Candles start -->
        <div id="candle_1">
            <div class="candleFlame" id="candleFlame_1">&nbsp;</div>
            <div id="fallingDropWax1_right">&nbsp;</div>
        </div>
        <div id="candle_2">
            <div class="candleFlame" id="candleFlame_2">&nbsp;</div>
            <div id="fallingDropWax2_right">&nbsp;</div>
        </div>
        <div id="candle_3">
            <div class="candleFlame" id="candleFlame_3">&nbsp;</div>
            <div id="fallingDropWax3_right">&nbsp;</div>
        </div>
        <div id="candle_4">
            <div class="candleFlame" id="candleFlame_4">&nbsp;</div>
            <div id="fallingDropWax4_right">&nbsp;</div>
        </div>
        <!-- // Candles end -->

        <!-- Sidebar menu start -->
        <div id="menuRightSideGame" >
            <div class="rightSideMenuItem">
                <div class="fa fa-repeat fa-2x rightSideMenuItemIcon" ng-click="resetGame();" id="resetGameIcon"></div>
            </div>

            <div class="rightSideMenuItem">
                <div class="fa fa-close fa-2x rightSideMenuItemIcon" ng-click="cancelGame();" id="cancelGameIcon"></div>
            </div>
        </div>
        <!-- // Sidebar menu start -->
    </ion-content>
</ion-view>

感谢您的任何建议。

Answer 1

对于该跨度，请使用点 (pt) 或百分比 (%)，不要使用像素，因为它们在物理上代表不同分辨率下的不同大小。请同时检查:Pixels vs. Points in HTML/CSS