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

剪切时调整文本大小

1 个答案: