11

現在、私のコンテンツはレスポンシブではありません。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 ）を超えないようにしますが、明らかに機能しませんでした。私は何を間違っていますか？

4

3 に答える 3

18

この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/

于 2012-09-28T02:17:32.073 に答える
8

widthそこに行くことはあまりありませんが、あなたが探しているのはand値を反転することだと思いmax-widthます:

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

これにより、使用可能なスペースの幅の 90%、最大 960px のコンテナーが得られますが、それはコンテナー自体がサイズ変更可能であることに依存します。ただし、レスポンシブ デザインは大きなワックス ボールなので、表面を傷つけることはありません。

于 2012-09-28T01:54:07.467 に答える