文本被截断时调整大小

Question

我有一个包含 2 个并排包含文本的 div 的网页。我希望每个文本的大小保持相同，直到屏幕宽度切断文本，此时我希望包含 2 个文本的 div 的“宽度”为屏幕大小的 100%。这样我的网站在桌面上看起来是一样的，但是当在移动设备上查看时，如果屏幕宽度足够小到文本截断的地方，那么文本会被缩放以占据屏幕宽度。

这是我当前用于这部分的 html：

<div id="fullname">
            <div class="firstname">First</div><div class="lastname">Second</div>
</div>

连同当前的css：

.firstname
{
    display: inline;
    color: #FFFFFF;
    font-size: 65px;
    font-weight: 900;
    font-family: 'Lato', sans-serif;
    letter-spacing: -3px;
    width: .5em;
}

.lastname
{
    display: inline;
    color: #FFFFFF;
    font-size: 65px;
    font-weight: 100;
    font-family: 'Lato', sans-serif;
    letter-spacing: -3px;
}

#fullname
{
    max-width: 100%;
    margin: 50px 10px 0;
    white-space: nowrap;
}

Answer 1

尝试使用媒体查询是您的 CSS 来做到的。代码不要带在身边，给我一分钟……

编辑：把它放在你的 CSS 文件中：

.firstname
{
display: block;
color: #FFFFFF;
font-size: 65px;
font-weight: 900;
font-family: 'Lato', sans-serif;
letter-spacing: -3px;
width: .5em;
}

.lastname
{
display: block;
color: #FFFFFF;
font-size: 65px;
font-weight: 100;
font-family: 'Lato', sans-serif;
letter-spacing: -3px;
}

@media screen and (min-width:500px) {

.firstname
{
display: inline;
color: #FFFFFF;
font-size: 65px;
font-weight: 900;
font-family: 'Lato', sans-serif;
letter-spacing: -3px;
width: .5em;
}

.lastname
{
display: inline;
color: #FFFFFF;
font-size: 65px;
font-weight: 100;
font-family: 'Lato', sans-serif;
letter-spacing: -3px;
}

}

#fullname
{
max-width: 100%;
margin: 50px 10px 0;
white-space: nowrap;
}