0

こんにちは、このjqueryウィジェットをレスポンシブにしようとしています。幅をパーセンテージに置き換えてみました。私はもともとhttp://jqueryglobe.com/article/feature_list/で見つけましたが、サイトは削除されたので、ここの自分のサイトにあります http://www.piercemcgeough.co.uk/sidetabs/

幅と高さのあるセット画像なので問題はタブのようです。

みんな助けてください。ありがとうございます

4

1 に答える 1

0

画像が小さくなると、左側の 3 つのリンクを表示するために必要な高さが一致しなくなるため、単純にすべてを拡大縮小するのは難しい場合があります。

現在の構造は基本的に次のとおりです。 

#tabs    #output  .right

@media リクエストを使用して、ビューポイントが小さくなるにつれてこれを変更し始めるのはどうですか?

タブレット用 

#tabs  #output  
.right

スマートフォン向け 

#tabs  
#output  
.right

CSSは大まかに

@media (min-width: 768px) and (max-width: 979px) { /* タブレットの場合、右の div を左の div の下にドロップ */

.left, .right{ width:100%; }

}

@media (最大幅: 767px) {

/* タブレットの下に、タブ、出力、および右の div を垂直に積み上げます */

.left #tabs, .left #output, .right{ width:100%; }

また、現時点では、div#feature_list の幅は 750px に固定されています。これをパーセンテージ (おそらく 100%) に変更するとよいでしょう。

また、出力 div の画像を次のようにスケーリングする必要がある場合もあります。 

ul#output li img{ 
width:100%;
height:auto;
}

確かにこれ以上の微調整が必​​要になりますが、重要なことは、これをレスポンシブで使いやすいものにしたい場合は、視点が変わるとレイアウトを変更することを考え始める必要があると思います. 単純にすべてをスケーリングできるわけではありません。

幸運を祈ります。Web デザインにとって興味深い時期です。

于 2013-03-30T11:56:38.370 に答える