4

一日中これにひどく苦しんでいて、主題についてより多くの知識を持っている誰かが私を多くの悲しみから救ってくれると感じています...

Jquery Mobile を使用して Web サイトを作成しましたが、すべてのページで標準ヘッダーの代わりにカスタム イメージ/ロゴを使用したいと考えています。少し複雑なのは、ナビゲーション用のカスタム ヘッダー/画像のすぐ下にナビゲーション バーも使用していることです。私が話していることについては、以下の画像を参照してください。

http://postimage.org/image/yw1wajjr/

だからここで私は問題に遭遇しています...カスタム画像/ヘッダーのスケーリングは私に悪夢を与えています. 特定の解像度 (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 の 100 万通りのバリエーションを試してみましたが、うまくいきませんでした。画像の 3 つまたは 4 つの異なるバージョンを使用したメディア クエリが含まれる気がしますが、最善の努力にもかかわらず、それを行うための最良の方法を見つけることができませんでした。

私の理想的なシナリオ - リンクされた背景画像 + ナビゲーション バーの組み合わせ (または類似のもの) は、一般的なすべてのモバイル デバイスで縦向きと横向きの両方のモードでうまく機能します。

アドバイスをいただければ幸いです...

4

2 に答える 2

3

100% ではありませんが、背景ではなくロゴ画像だけを使用して、CSS で何ができるかがわかると思います。

ここに画像の説明を入力

そして、CSSを使用して上部と下部のレイヤーを作成します

例：

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>​
于 2012-11-06T14:20:36.893 に答える