0
ブラウザウィンドウのサイズが変更され、うまく機能していると思われるコードがいくつか見つかりました。ここでJavascriptボディからdiv /要素へのフォントのスケーリング
コードです：
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);
}
私の質問は：
指定されたdiv要素が代わりにスケーリングされたときにテキストがスケールするので、どのように私はこのコードを変更することができますか？
@Deanoの推奨回答コードが更新されました。このコードは、ブラウザのサイズが変更された場合にのみスケーリングされます。
<!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>
のようなlibaryを使用する必要がありますどのようなあなたはこれまでに試してみましたか？あなたのコードを示してください。 – Soviut