Jquery 手机 : Custom Header w/background image + navbar

Question

一整天都在为此苦苦挣扎，我觉得对这个问题有更多了解的人可以让我免去很多悲伤......

我使用 Jquery Mobile 创建了一个网站，我想在我的所有页面上使用自定义图像/ Logo 而不是标准标题。使它稍微复杂一点的是，我还在自定义标题/图像下方使用导航栏进行导航。请参阅下图了解我在说什么:

http://postimage.org/image/ywh1wajjr/

所以这就是我遇到问题的地方......自定义图像/标题的缩放让我做噩梦。在特定分辨率下(例如 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 可以做什么，只使用 Logo 图像而不是背景:

然后用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>​