jquery-mobile - 在 JQuery Mobile App 的默认主题中自定义标题

Question

我正在开发 JQuery Mobile 应用程序。我需要放大用于标题文本的字体。每当我放大文本大小时，ui-header 栏的高度就会增加。我不希望它成长。相反，我希望 ui-header 保持默认 ui-header 的大小。我只想放大文本大小。目前，我有以下几点:

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