-1

次のようなページが設定されています。

私の現在のページ

私の質問は、モバイル サポートに関するもので、次のことを行うにはどうすればよいですか。

ユーザーがウィンドウのサイズをスマートフォン画面のサイズに変更すると、ヘッダー領域/ログインの下にあるすべてのメイン コンテンツを削除し、ヘッダー、ログイン フォーム、およびフッターのみを保持したいと考えています。そのため、CSS メディア クエリを使用してこれを行っています。私の問題は、ログイン フォームのマークアップがヘッダー領域内にあることです。

<div id = "header">
 <div id= "logo"><img src =""/> </div>

 +-------form markup here------+
 |<div id= "login-form">..... </div>|
 + ----------------------------+

</div>
<div id= "main-content">
  This is where I want to put the login form
</div>

だから私の質問は、どうすればいいですか？

  1. 画面の幅と高さがスマートフォンのサイズであることが検出されたときに、別のcssファイルを作成してリンク/適用する必要がありますか?
  2. main-content 内にマークアップ ブロックを作成し、その css スタイル表示を none に設定する必要があります。画面がスマートフォン サイズにサイズ変更されるまで、メディア クエリが表示属性を変更するように設定されていますか?

これを達成するための最良の方法は何ですか？少なくとも、その答えを正当化するための少しの説明に感謝します。リンクや参考文献も大歓迎です！

乾杯..

4

2 に答える 2

2

メディア クエリを使用して、デバイスまたはデバイスの幅/高さに基づいてコンテンツを非表示および表示します。

ここに良いメディアクエリのチートシートがあります:

http://stephen.io/mediaqueries/

別のポスターが示唆したように、フォームを「絶対」として配置せず、ヘッダーの外に置きます。これは非常にずさんで悪い習慣です。また、「絶対」フォームは何に配置されますか? 体？ああ。ラッパーが必要です - そしてそれはただのコードです。すべて CSS 経由で行うことができます。メディア クエリを使用して、ヘッダーの CSS スタイルを変更したり、要素を表示/非表示にしたり、位置を変更したりできます。

また

JQUERY (最適なルートではありませんが、必要なものについては、再設計なしで制限されます)。簡単に説明できるようにシンプルにしました。注、私はこれをテストしていません：

$(window).resize(function(){
    var maxwidth = $(window).width(); // get device window width
    var form = $('#login-form'); // form

    if(maxwidth <= 320) { // 320 px or whatever you want
        form.clone().appendTo('#main-content'); // clone form and append to main content
        form.eq(0).hide(); // hide first form, the one in the header
    }
    else {
        form.eq(0).show(); // show initial form
        form.eq(1).remove(); // remove cloned form, if set
    }
});
于 2013-11-11T21:42:15.027 に答える