Ionic：如何在不同分辨率的span标签中设置相同的字体？

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分辨率（见下图）。

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

视口设置为：

<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)或百分比（%）跨度，不要使用像素，因为它们物理上代表不同分辨率的不同大小。请同时检查以下内容：HTML/CSS中的像素与点