web-dev-qa-db-ja.com

メディアクエリ：min-heightとmin-widthを確認しますか？

ブラウザの最小高さと最小幅に基づいてページのCSSを変更しようとしているので、これを使用しています：

@media (min-height: 500px), (min-width: 580px) {
    /* CSS stuff */
}

しかし、何らかの理由で、これは機能しません。 min-heightとmax-width（またはその逆）またはmax-heightとmax-widthを同時にチェックできますが、両方のmin値をチェックしても機能しないようです。

これをさらに指定する必要があります：min-height or a min-widthがtrueになった場合にブラウザーが動作するようにします。 and-operatorの使用は、両方の基準が満たされている場合にのみ機能します。

私は何か間違っていますか？

htmlcsshtml5css3media-queries
24
The.Prophecy

次のように、コンマの代わりにandを使用します。

@media (min-height: 500px) and (min-width: 580px) {
    /* CSS stuff */
}
53
Alexandra

に次のメタタグを追加しました：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

REfは次のとおりです。 http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag/

その後、メディアクエリを使用します。

@media (min-height: 500px) and (min-width: 580px) {
    /* CSS stuff */
}

メディアクエリの詳細については、すべてのiOSデバイスの http://stephen.io/mediaqueries/ から詳細情報を入手できます。他のクエリがある場合はお知らせください。ここからでもより良いアイデアを得ることができます http://webdesignerwall.com/tutorials/responsive-design-in-3-steps

6
Divya Bhalodiya

メディアクエリを他の内部で使用します。

@media  screen and  (min-height: 40px)  {
   @media  screen and  (min-width: 50px)  {
    /*enter css here to apply for both condition*/
   }
}
6
Igor Cube