J'ai trouvé du code qui mettra à l'échelle du texte lorsque la fenêtre du navigateur est redimensionnée et qu'elle semble fonctionner correctement.Javascript Mise à l'échelle du code de la police du corps vers div/element
Voici le code:
document.body.setScaledFont = function (f) {
var s = this.offsetWidth,
fs = s * f;
this.style.fontSize = fs + '%';
return this
};
document.body.setScaledFont(0.35);
window.onresize = function() {
document.body.setScaledFont(0.35);
}
Ma question est:
Comment puis-je modifier ce code afin que le texte balance quand un div spécifié est mise à l'échelle à la place?
Code mis à jour à partir de la réponse suggérée par @Deano. Ce code n'est redimensionné que lorsque le navigateur est redimensionné.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#window {
border:1px dashed #ccc;
overflow: hidden;
resize: both;
text-align: center;
}
</style>
</head>
<body>
<div id="window">Scale the window</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#window').mouseup(function() {
document.getElementById('window').setScaledFont = function (f) {
var s = this.offsetWidth,
fs = s * f;
this.style.fontSize = fs + '%';
return this
};
document.getElementById('window').setScaledFont(0.35);
window.onresize = function() {
document.getElementById('window').setScaledFont(0.35);
}
});
});
</script>
</body>
</html>
Qu'est-ce que avez-vous essayé jusqu'ici? S'il vous plaît montrer votre code. – Soviut