Question

整天苦苦挣扎，我感觉有人对主题有更多的了解可以为我节省很多的痛苦......

我使用Jquery Mobile创建了一个网站，我想在我的所有页面上使用自定义图像/徽标而不是标准标题。更简单的是，我还在自定义标题/图像下使用导航栏进行导航。请参阅下图，了解我在说什么：

所以这就是我遇到问题的地方......自定义图像/标题的缩放给了我噩梦。在某个分辨率下（例如Dreamweaver中预设的480x800），一切看起来都很好。但是，当分辨率增加时，我开始遇到问题：

首先，图像高度不断变大，使整个标题（图像和导航栏）比我想要的要大得多。其次，如果您使用的超高分辨率显示器超出了图像的总宽度，则图像会停在其最大宽度，而导航栏（以及页面的其余部分）继续扩展到100％的宽度。页面 - 这看起来很奇怪。

我正在使用以下文件/设置：

jquery-1.8.2.min.js，jquery.mobile.structure-1.2.0.css，jquery.mobile.theme-1.2.0.css，jquery-1.8.2.min.js，jquery.mobile -1.2.0.js和Dreamweaver cs6。

我在上面的文件中尝试了一百万种不同的CSS变体以及页面中的html而没有运气。我有一种感觉它将涉及媒体查询，有3或4个不同版本的图像，但尽管我尽了最大的努力，但我仍然能够找到最好的方法。

我的理想情景 - 链接的背景图片+导航栏组合（或类似的东西）在纵向和横向模式下适用于所有流行的移动设备。

任何建议都将不胜感激......

Answer 1

这不是100％，但希望它能让您了解CSS可以做什么，只使用徽标图像而不是背景：

enter image description here

然后使用CSS制作顶层和底层

示例：

http://jsfiddle.net/PMhXe/

CSS：

.bgimg {
    background-image: url(http://dummyimage.com/5x5/a80c10/ffffff.png), url(http://dummyimage.com/5x5/a80c10/ffffff.png);
    background-repeat:repeat-x;
    background-position:100% 120px, 100% -120px;
    background-size:100% 180px;
}
.logo-font {
    font-size:x-large;
    font-weight:bold;
}

HTML：

<div data-role="page" class="type-home">
    <div data-role="header" class="bgimg">
        <h1><img src="http://www.albionroad.com/images/stories/logos/manchester-united-logo-1.png" alt="logo" /><br /><div class="logo-font">MANCHESTER UNITED<br />&lt;&nbsp;&middot;&nbsp;&gt;</div></h1> 
        <div data-role="navbar">
            <ul>
                <li><a href="#">One</a></li>
                <li><a href="#">Two</a></li>
                <li><a href="#">Three</a></li>
                <li><a href="#">Four</a></li>
                <li><a href="#">Five</a></li>
            </ul>
        </div><!-- /navbar -->
    </div><!-- /header -->
</div>

Answer 2

你的jquery移动应用程序标题有这样的东西，你的徽标图像将显示在哪里：

<div data-id="header" data-position="fixed" data-theme="c" data-role="header" role="banner" class="header-manU ui-header ui-bar-c ui-header-fixed slidedown">
  <h1 class="manU-logo ui-title" role="heading" aria-level="1">
    <a href="#" class="ui-link">
      <img src="css/themes/default/images/logo_header.png">
    </a>
  </h1>
</div>

只需应用此css：

.ui-mobile .header-manU a img {
  width: 100%;
 }

希望这有帮助

Jquery Mobile：带/背景图像+导航栏的自定义标题

2 个答案: