在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/