13

レスポンシブ デザインの作成について、ご協力をお願いします。
問題は、要素を絶対的に配置する方法がわかりませんが、それらの間のトッププロポーションから同じ距離を保つことです.

ウィンドウ幅のサイズを変更して、2 つの要素が常に上から同じスペースを維持するのではなく、互いに離れていることを確認できる例へのリンクを次に示します。したがって、私が探しているのは、全体のスケーリングを偽造することです。これにより、縮小/拡大するだけで、常に同じように見えます。

ウィンドウのサイズを変更するときに、要素を上に移動して上からスペースを縮小するにはどうすればよいですか?

http://jsfiddle.net/QV6DR/

.container {
    width: 100%;
    height: 1000px;
    position: relative;
    background: #eee;
}

.container div {
    height: 0;
    position: absolute;
    background: #ccc;
}

.elm1 {
    width: 20%;
    padding-bottom: 20%;
    top: 20%;
    left: 5%;
}

.elm2 {
    width: 30%;
    padding-bottom: 30%;
    top: 40%;
    right: 10%;
}

ここに画像の説明を入力

4

1 に答える 1

7

コンテナーの高さは 1000 ピクセルで、要素はコンテナーの上部 (常に 200 ピクセル) に対して 20% の位置に配置されているため、ブラウザー ウィンドウのサイズが変更されても上に移動することはできません。

コンテナー スタイルを次のように変更した場合:

.container {
    width: 100%;
    height: 100%;
    position: absolute;
    background: #eee;
}

ブラウザ ウィンドウのサイズを縦方向に変更すると、要素が上に移動します。

ウィンドウのサイズを垂直方向に変更せずに垂直方向に移動する唯一の方法は、メディアクエリを使用して上部を変更することだと思います: 40%; あなたの要素のスタイル。

メディアクエリのないフィドルは次のとおりです。

于 2013-11-08T17:08:45.110 に答える