Taille de texte en fonction de la résolution

Commenter

Contenu du snippet

Petit script en jQuery qui permet de modifier la taille de la police en fonction de la taille du navigateur ; plus votre résolution est grosse, plus la police sera grande !

Source / Exemple : 


<html>
	<head>
	<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

	<script type="text/javascript">
	$(document).ready(function(){

		// id, classe ou balise HTML dont la fonte est modifiable dans ce tableau
		// indiquez html ou body si vous voulez modifier toute la page
		var section = new Array('div');
		//var section = new Array('span','.section');
		section = section.join(',');

		
		$(window).resize(function() {
			
			$(section).each(function () {
				
				var currentFontSize = $(this).css('font-size');
				var currentFontSizeNum = parseFloat(currentFontSize, 10);
			
				var compt = 0;
				str = $(this).text();
				var code=new Array(str.length);
				for(var i=0;i<str.length;i++){
					if(str.charCodeAt(i)>=65 && str.charCodeAt(i)<=90){
						compt = compt + 2;
					} else {
						compt++;
					}
				}
				
				var newFontSize = (($(this).width()/compt-1)*3);
				
				$(this).css('font-size', newFontSize);
			});
			
			return false;
		});
		
		$(window).resize();
	});
	</script>
	
	</head>
	<body onload="">

	<div  style="width: 50%; background: #F0F0F0;" class="section">
		<span><b>La taille de police est MODIFIABLE dans cette partie</b></span>  
	</div>
	<div  style="width: 50%; background: #F0F0F0;" class="section">
		<span><b>La taille de police est MODIFIABLE dans cette partie</b></span>  
	</div>
	</body>
<html>

Conclusion :


Évidemment, il faut mettre des pourcentages sur vos blocs si vous voulez que votre texte bouge avec ;)

A voir également

S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (tefa24600)