Titre locks 02

Exemple CSS Lock 02.

h1 {
	font-size: 3.875rem; /* 62px */
	margin-left: 0.5em;
	}
	
@media (min-width:320px) {
		h1 {
			font-size: calc(4.31vw + 10.208px); /* 24px */
			margin-left: calc(0.54vw + 3.072px); /* 3.2px  0.2em - margin saute ! pas linéaire !!! */
			} 
}
		
@media (min-width:1200px) {
		h1 {
			font-size: 62px;  /* 62px */
			margin-left: 0.5em; /* 0.5em 8px */
			}
}


.texte {
	font-size: 1.125rem; /* 18px */
	padding-left: 0.5em;
}

@media (min-width:320px) {
		.texte {
			font-size: calc(0.68vw + 3.824px);  /* 12px */
			padding-left: calc(0.54vw + 3.072px);
			} 
}
		
@media (min-width:1200px) {
		.texte {
			font-size 18px;  /* 18px */
			padding-left: 0.5em;
			} 
}

A une résolution de 1280/800 '.texte' est plus petit que '.texte-02' et à 1920/1200, '.texte' devient plus grand et devient 'bold' en plus ! A une résolution de 320, '.texte' est illisible même avec un seuil planché définit !

Paragraphe de référence. !! -- Lorem. Sollicitudin ve, augue lectus neque aliquam, quis consectetuer mi porta in eget. Porta sollicitudin habitant neque ve, nostra. Lobortis libero eget suspendisse conubia, consectetuer tempus aptent. Ad vitae condimentum sagittis, lorem sollicitudin, pharetra lorem. In maecenas euismod, pretium mollis per. Mus auctor dictumst, amet, erat leo lectus. Augue massa varius. Sociis, morbi scelerisque amet diam nam varius massa convallis nostra mi dui nulla, fermentum. Id lobortis molestie. Etiam dui elit justo fringilla sed, dis id justo aptent. Porta netus, erat convallis. Luctus, ridiculus hac, fermentum netus sodales.