Html 爱奥尼亚：如何在span标签中为不同的分辨率设置相同的字体？

我有以下带有内跨距的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>

问题是字体大小在横向分辨率上是很好的，大约640 x 320，但如果我尝试将设备的分辨率设置为1920 x 1080，我总是得到比分辨率640 px小的字体（见下图）

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

视口设置为：

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

整个模板是：

<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>

活动蜡烛：{{activeCandle}}|
活动蜡烛：0|
所选蜡烛：{{selectedCandle}}|
选定蜡烛：无|
卷：{{micVolume}}|
Treshold:{{micTreshold}|

---

感谢您的建议。

对于该范围，请使用点（pt）或百分比（%），不要使用像素，因为它们在不同分辨率下物理上表示不同的大小。请检查这一点：

在

vw

中设置字体大小如何。谷歌开发者网站上没有提到vw meassure单位：但长度单位比这还要多。看到了吗？或者你的意思是你想在那页上限制自己的长度单位？在这种情况下，我建议使用一组@media查询，每个查询的字体大小不同。嗯，如果有帮助，请检查此比较：

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>