更改字體大小/寬度

Question

我試圖做簡單的jQuery功能：

<div id="container"><span>This is my text</span></div> 

JS代碼：

$(document).ready(function() { 
    var fontSize = parseInt($("#container").width()/4)+"px"; 
    $("#container span").css('font-size', fontSize); 
}); 

CSS代碼：

* { 
    font-family:Myriad Pro; 
} 

#container { 
    height:100px; 
    width:98%; 
    background-color:#eeeeee; 
    padding:1%; 
} 

它當我改變調整大小窗口並刷新它，但我希望它連續工作，所以當我調整瀏覽器窗口字體大小動態變化。

http://jsfiddle.net/8TrTU/1627/

Answer 1

你可以在窗口上添加一個處理調整大小事件，並執行新的功能update_fontsize持有你的字號法寶：

var update_fontsize = function(){ 
    var fontSize = parseInt($("#container").width()/4)+"px"; 
    $("#container span").css('font-size', fontSize); 
}; 

$(window).resize(function() { 
    update_fontsize(); 
}); 

$(document).ready(function() { 
    update_fontsize(); 
}); 

Answer 2

嘗試使用jQuery

var resizeFunction = function() { 
 
    var fontSize = parseInt($("#container").width()/4)+"px"; 
 
    $("#container span").css('font-size', fontSize); 
 
} 
 
$(document).ready(function() { 
 
    resizeFunction(); 
 
}); 
 

 
$(window).resize(function() { 
 
    resizeFunction(); 
 
});

* { 
 
    font-family:Myriad Pro; 
 
} 
 

 
#container { 
 
    height:100px; 
 
    width:98%; 
 
    background-color:#eeeeee; 
 
    padding:1%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="container"><span>This is my text</span></div>

的 .resize功能

Answer 3

$(document).ready(function() { 
 
    $(window).resize(function(){ 
 
    var fontSize = parseInt($("#container").width()/4)+"px"; 
 
    $("#container span").css('font-size', fontSize); 
 
    }); 
 
    var fontSize = parseInt($("#container").width()/4)+"px"; 
 
    $("#container span").css('font-size', fontSize); 
 
    
 
});

* { 
 
    font-family:Myriad Pro; 
 
} 
 

 
#container { 
 
    height:100px; 
 
    width:98%; 
 
    background-color:#eeeeee; 
 
    padding:1%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="container"><span>This is my text</span></div>

Answer 4

您可以使用$(window).resize事件：

$(window).resize(function() { 
 
    var fontSize = parseInt($("#container").width()/4)+"px"; 
 
    $("#container span").css('font-size', fontSize); 
 
});

* { 
 
    font-family:Myriad Pro; 
 
} 
 

 
#container { 
 
    height:100px; 
 
    width:98%; 
 
    background-color:#eeeeee; 
 
    padding:1%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="container"><span>This is my text</span></div>

Answer 5

function resizeFont() { 
    var fontSize = parseInt($("#container").width()/4)+"px"; 
    $("#container span").css('font-size', fontSize); 
} 
$(document).ready(function() { 
    resizeFont(); 
}); 
$(window).resize(function() { 
    resizeFont(); 
}); 

試試這個代碼。

Answer 6

保持你的代碼在一個名爲function說 - changeSize，並呼籲它在document.ready和window.resize如下：

DEMO

function changeSize(){ 
    var fontSize = parseInt($("#container").width()/4)+"px"; 
    $("#container span").css('font-size', fontSize); 
} 

$(document).ready(function() { 
    changeSize(); 
    $(window).resize(changeSize); 
}); 

或只是document.ready()如下一次：

$(document).ready(function() { 
    $(window).resize(changeSize).trigger('resize'); 
}); 

Answer 7

由於事件調整大小結果在網頁上的沉重的開銷，我會建議使用在這種情況下+value instead of parseInt()和caching the DOM elements不要在這個小提琴連連喜歡選擇它們：http://jsfiddle.net/8TrTU/1631/

Answer 8

這可以使用普通的CSS來實現，看看這篇文章：

https://css-tricks.com/viewport-sized-typography/

而且，考慮使用EM或REM的字體大小與像素。

https://j.eremy.net/confused-about-rem-and-em/