在JQuery Mobile App的默認主題中自定義標題

Question

我正在研究JQuery Mobile應用程序。我需要放大標題文本使用的字體。每當我放大文字大小時，ui標題欄的高度就會增加。我不希望它增長。相反，我希望ui頭保持與默認ui頭相同的大小。我只想放大文字大小。目前，我有以下內容：

.t1 { color: blue; font-size:24pt; font-weight:normal; } 
.t2 { color: white; font-size:24pt; font-weight:normal; } 

<div data-role="header" data-position="fixed"> 
    <a href="#" data-icon="arrow-l" data-direction="reverse" data-iconpos="notext" class="ui-btn-left jqm-home dd-btn">Back</a> 
    <h1><span class="t1">My</span><span class="t2">App</span></h1> 
</div> 

如何更改字體大小而不增加標題？

Answer 1

您還必須修改.ui-header .ui-title規則更改頂部和底部邊距值。例如：

.ui-header .ui-title { 
    margin: 0 30% 0; 
} 

http://jsfiddle.net/Pwqtm/1/