1

Web サイトのデザインが完了したので、レスポンシブ対応にしたいと考えています。サイトを使用してモバイルではできないことが多いので、PC 向けにレスポンシブにする必要があります。

ウィンドウのサイズを変更すると、すべての要素が適切に配置およびサイズ変更されますが、純粋な CSS を使用しているのか、 CSSと JS の両方を組み合わせて使用​​しているのでしょうか。iCloud

多くのチュートリアルを見つけましたが、それでもうまくいかない理由がわかりませんでした。

http://unstoppablerobotninja.com/demos/resize/

私のhtml構造の例:

<div id="place">
 <div id="wrap">
   <div id="1"><img src="">this div needs to be responsive</div>
   <div id="2"><img src="">this too</div>
   <div id="3"><img src="">and this</div>
   <div id="4"><img src="">also this</div>
 </div>
</div>

現在の CSS スタイル:

#place{
    position: relative;
    width:3065px;
    height:560px;
    margin:0px;
}

#wrap,
{
    width:975px;
    height:480px;
    position: absolute;
    top:80px;
}

#1{
    width:215px;
    height:103px;
    position: absolute;
    left:0px;
    top:0px;
        background-color:#409da5;
}

#1 img,
{
    width: 100%;
    height: 100%;
}

window.resizeを使用してウィンドウのサイズ変更を検出し、jQuery を使用して要素のサイズを変更できます。

  $(window).resize(function() {

              var nh = $("#1")width() / ratio;
              $("#1").css('height', nh + 'px');

              var nw = $("#1").height() * ratio;
              $("#1").css('width', nw + 'px');

  });

しかし、これを行う他の方法はありますか？

4

4 に答える 4

3

メディア クエリを使用して、特定の解像度で css を挿入できます。

例えば：

<style>
    @media screen and (max-width: 400px) {
        /*These styles will only be applied if the user is on a phone*/
        body {
            font-size: 100%;
        }
    }
</style>

サイズ変更時に滑らかに見えるようにトランジションを追加する必要があります。おっと、viewport メタ タグを忘れないでください。<meta name="viewport" content="width=device-width, initial-scale=1" />

于 2013-11-07T04:22:04.373 に答える
1

icloud の例に似た方法で要素をシフトしてアニメーション化し、利用可能な幅を埋めたい場合は、まさにその結果を達成する「Masonry」と呼ばれる JavaScript ライブラリがあります: http://masonry.desandro.com/

ただし、「レスポンシブ」という用語には、より深い意味合いもあることに注意してください。あなたは、ウェブサイトを構築するためのプロセス全体と、その過程でさまざまな手法を採用するアプローチについて質問しています。CSS3 メディア クエリをチェックして、作業中のより大きな側面の 1 つを要約してください。

于 2013-11-07T04:23:05.200 に答える
-3

おそらく、JavaScriptを使用してレスポンシブにすることができます。あなたが求めているのはアニメーションなどのように見えるので、純粋なjavascriptは最初は少し使いにくいかもしれません。したがって、「jQuery」と呼ばれる JavaScript ライブラリを使用することをお勧めします。ここで使用方法に関するチュートリアルを見つけることができます. jquery を使用する理由は、求めているものに対して定義済みの関数を使用できるようにするためです。したがって、たとえば、動的なサイズ変更は、最初は高速になり、シミュレーションの終わりに近づくにつれて遅くなるという効果とともに、数行の jQuery を使用して実行できますが、純粋な JavaScript では数十行が必要になる場合があります。数百行ではありません（ランダムな推測として）。iCloud の人たちが何を使っているかはわかりませんが、このようなものでしょう。これが優れている理由は、色の変化、サイズ変更、再配置など、ほとんど何でもアニメーション化できるからです。ドラッグ可能なオブジェクトを作成することもできます! これを使用するには、ライブラリをダウンロードし、Web サイト フォルダー内のフォルダーに配置し、html でライブラリへのリンクを定義する必要があります。

于 2013-11-07T04:53:01.520 に答える