web-dev-qa-db-ja.com

divコンテンツをレスポンシブにする

現在、私のコンテンツはレスポンシブではありません。 iPhoneでテストしましたが、テキストが画面上に表示されます。

コンテナのCSSを次のように変更しました：

#container2 {
    width: 960px; 
    max-width: 90%;
    position: relative;
    left: 50%;
    margin-left: -480px;
    line-height: 1.4em;
}

変更後にテストすると、コンテンツが消えます。 max-width：90％を置くことを読みました。境界幅を超えないようにします（ http://webdesignerwall.com/tutorials/5-useful-css-tricks-for-responsive-design ）が、明らかに機能しませんでした。私は何を間違えていますか？

htmlresponsive-designcss
9
user1636968

このCSSを試してください：

/* Show in default resolution screen*/
#container2 {
width: 960px;
position: relative;
margin:0 auto;
line-height: 1.4em;
}

/* If in mobile screen with maximum width 479px. The iPhone screen resolution is 320x480 px (except iPhone4, 640x960) */    
@media only screen and (max-width: 479px){
    #container2 { width: 90%; }
}

ここでデモ： http://jsfiddle.net/ongisnade/CG9WN/

14
Fredy

そこまで進むことはあまりありませんが、探しているのはwidthとmax-width値：

#container2 {
  width: 90%;
  max-width: 960px;
  /* etc, etc... */
}

これにより、使用可能なスペースの幅の90％、最大960pxのコンテナーが提供されますが、それはコンテナー自体のサイズ変更が可能であることに依存しています。しかし、レスポンシブデザインはワックスの大きな塊なので、表面を傷つけることさえありません。

8
ultranaut

@media screen and (max-width : 760px)（タブレットと電話用）およびこれで使用：<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

1
Scriptery