向右浮动可使文本看起来更小

Question

我有这个html：

.CONNECT-WITH-US {
        font-family: "Open Sans";
        font-size: 8px;
        font-weight: 600;
        font-style: normal;
        font-stretch: normal;
        line-height: normal;
        letter-spacing: normal;
        color: #141b2f;
        padding: 5px 24px 0 24px;
    }
    
    .connect {
        float: right;
    }

<div class="CONNECT-WITH-US"><label>CONNECT WITH US</label><label class="connect">CONNECT WITH US</label></div>



    

此代码在小屏幕（移动设备）中看起来像这样 div中的第二个标签将显示较小的文本。 那是因为漂浮吗？

Answer 1

我在代码中做了一些编辑

可在手机屏幕上使用。 也许我不明白你想问什么...

.CONNECT-WITH-US {
    font-family: "Open Sans";
    font-weight: 600;
    font-style: normal;
    font-stretch: normal;
    line-height: normal;
    letter-spacing: normal;
    color: #141b2f;
    padding: 5px 24px 0 24px;
}



.CONNECT-WITH-US .label-2 {
    float: right;
}

<div class="CONNECT-WITH-US">
<label>CONNECT WITH US</label>
<label class="label-2">CONNECT WITH US</label>
</div>

Answer 2

.CONNECT-WITH-US {
        font-family: "Open Sans";
        font-weight: 600;
        font-style: normal;
        font-stretch: normal;
        line-height: normal;
        letter-spacing: normal;
        color: #141b2f;
        padding: 5px 24px 0 24px;
    }
    
    .connect {
        float: right;
    }

<div class="CONNECT-WITH-US"><label>CONNECT WITH US</label><label class="connect">CONNECT WITH US</label></div>



    

由于某种原因，font-size似乎使屏幕上的文本变小了。即使在摘要中，此功能也能正常工作。看来，如果您正在通话，则float: right的播放效果会很差，其中一个文本的大小应为原始<p>的大小，而另一文本为您声明的8 pixels。如果您确实致力于在手机上使用该尺寸的设备，则可以尝试使用@media CSS来在较小的屏幕上显示不同的样式。