0

ウェブサイトのモックアップである1500px幅の画像が提供されています。

ウェブサイトのデザインは固定幅のデザインで、画像の中央の990px​​をデザインが占めています。したがって、画像の両側の255pxは、サイトがより大きなビューポートにどのように拡張されるかを示すためにオーバーハングしています（つまり、一部のエッジ要素が無限に拡張されることを除けばありません）。

私がやりたいのは、これを画像でシミュレートすることです（可能な限り上に）。したがって、ビューポートが1500pxの場合、画像は0,0から始まります。

ビューポートが990ピクセル以下の場合、画像は0,255ピクセルから始まります。

間にあるものはすべてスケーリングします。したがって、ビューポートの幅に応じて、負のマージンを-255から0にスケーリングしたいと思います。

の反対のようなもの

margin: 0 -10% 0 0;

これは、私が考えている方向とは逆の方向に進みます。ビューポートが広くなると、画像は右ではなく左に移動します。

4

1 に答える 1

0

スタイルシートで、いくつかのレスポンシブ デザイン手法を試すことができます..

@media screen and (max-width:1500px){
    #yourContainer{margin-left:0;background-color:#afa;}

}

@media screen and (max-width:990px){
    #yourContainer{margin-left:255px;background-color:#aaf;}

}

テスト用に追加された背景色 ;) この jsFiddle はこれを示しており、ブラウザ ウィンドウまたはフィドル列幅のサイズを変更するだけです - http://jsfiddle.net/vs6uz/1/

于 2013-02-20T06:49:22.127 に答える