jquery-mobile - 在 JQuery 移动应用程序的默认主题中自定义标题

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/