0

コード：

 .container {
      width: 960px;
      max-width: 100%;
      min-width: 960px;
      height: 500px;
      background-color: #fff;
      border: 1px solid #000;
 }

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) { 
 .container {
      width: 960px;
      max-width: 100%;
      height: 500px;
      background-color: #fff;
      border: 1px solid #000;
 }

デフォルトでは、コンテナーの最小幅は 960 ピクセルですが、私はレスポンシブ デザインを使用しており、iPad は幅 960 ピクセルよりも小さいです。上記のコードを使用すると、iPad の場合、min-width: 960px を取得しないと思いました。しかし、そうです。

最小幅が iPad 以外の CSS でのみ表示され、iPad CSS では最小幅が表示されないようにするにはどうすればよいですか?

4

2 に答える 2

2

min-width: 0メディア クエリに (必要に応じて 704px を)追加するだけです。

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) { 
 .container {
      min-width: 0;
  }
}

メディア クエリは、オーバーライドする必要がある一般的なスタイルシートの CSS 宣言と考えてください。すべての宣言を書き直さないでください。

于 2013-08-07T20:46:40.117 に答える