Redimensionner le texte quand il est coupé - jquery, html, css, html5, site web

J'ai une page Web avec 2 divs qui contiennent du textecote à cote. Je veux que la taille du texte reste la même pour chacun, jusqu'à ce que la largeur de l'écran coupe le texte. À ce stade, j'aimerais que la "largeur" ​​de la div contenant les 2 textes représente 100% de la taille de l'écran. Ainsi, mon site a la même apparence sur le bureau, mais lorsqu'il est affiché sur un mobile si la largeur de l'écran est suffisamment petite par rapport au texte coupé, le texte est ensuite mis à l'échelle pour occuper la largeur de l'écran.

Voici mon code HTML actuel pour cette partie:

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

Avec le css actuel:

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

Réponses:

Essayez d'utiliser des requêtes de médias est votre CSS pour le faire. Ne pas avoir le code avec moi, donnez-moi une minute ...

EDIT: Mettez ceci dans votre fichier CSS à la place:

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