当它被切断时调整文本的大小

我有一个包含两个并排文本的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; 
}

来源

2013-12-09 AggieDev

你为什么不只是使用媒体查询？ http://www.w3.org/TR/css3-mediaqueries/ – Aaron

可能重复[如何自动调整字体大小以适应div的内容？]（http://stackoverflow.com/questions/7100766/如何-可以-I-自动缩放最字体大小以适应的最内容对的一-DIV） –

尝试使用媒体查询是你的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; 
}

来源

2013-12-09 23:29:24 Geo1088

当它被切断时调整文本的大小

回答

相关问题