0

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>

画面が再拡大縮小されると、ボタンのサイズが変わるのは事実です。ただし、テキストのサイズは変更されません。デバイス画面のサイズに応じてサイズを変更する方法はありますか？

4

2 に答える 2

1

ドキュメントの幅またはボタンの幅を読み取ってから、その幅を基準にしたボタンのフォントサイズを作成できます。例：

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

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

于 2012-06-19T18:52:05.547 に答える
0

実例：

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>

関連している：

于 2012-06-20T01:11:15.760 に答える