動態改變文字的大小按鈕jquerymobile

Question

我有下面這段代碼生成jquerymobile樣式的按鈕

<a href="#" data-role="button" 
     data-theme="b" id="svbutton" style="position: absolute; top: 30%; margin-left: 0%;margin-right: 0%; width: 80%; height: 20%; text-align: center; font-size: 2.50em">Load Time...</a> 

這是事實，當屏幕獲得重新縮放，按鈕的大小會改變。但是文字的大小不會改變。有沒有辦法根據設備屏幕的大小來改變尺寸？

Answer 1

，你可以讀取文檔的寬度，或按鈕的，然後進行相關的按鍵的字體大小到寬，如：

var buttonWidth = $('#svbutton').width(); 
var fontSize = buttonWidth/10; 
$('#svbutton').css('font-size', fontSize + 'px'); 

的jsfiddle
http://jsfiddle.net/VFube/1

Answer 2

現場示例：

• http://jsfiddle.net/Pjvvx/（寬度）
• http://jsfiddle.net/3DSGT/（身高）

JS：

// For all buttons use something like this 
$('.ui-btn').css('width','50%'); 

// For individual buttons use something like this 
$('#theButton1').parent().css('width', '75%'); 

// Or this for HREF data-role buttons 
$('#hrefButton4').css('width', '45%'); 

我認爲這是你在找什麼

// this changes the height for all buttons 
$('.ui-btn-text').css('font-size','50px'); 

// This changes the height for a single element 
$('#hrefButton3').children().children().css('font-size','30px'); 

HTML：

<div data-role="page" id="home"> 
    <div data-role="content"> 
     <input type="button" id="theButton1" value="Press Me 1" /> 
     <input type="button" id="theButton2" value="Press Me 2" /> 
     <input type="button" id="theButton3" value="Press Me 3" /> 
     <input type="button" id="theButton4" value="Press Me 4" /> 
     <br /> 
     <a href="#" data-role="button" id="hrefButton1">HREF Me 1</a> 
     <a href="#" data-role="button" id="hrefButton2">HREF Me 2</a> 
     <a href="#" data-role="button" id="hrefButton3">HREF Me 3</a> 
     <a href="#" data-role="button" id="hrefButton4">HREF Me 4</a> 
    </div> 
</div> 

相關：

• resizing a BUTTON through CSS