私は以下のコードがあります。MAX-デバイス幅や向きの変更
@media all
and (max-device-width: 360px) {
div {
background-color: green;
}
}
@media all
and (min-device-width: 361px)
and (max-device-width: 640px) {
div {
background-color: blue;
}
}
が、私は色が変化していない私のアンドロイド携帯電話の向きを変えます。 window.innerWidthが640px（ランドスケープ）から360（ポートレート）に変更されているのを確認している間に、なぜそれが起こりますか？
max-device-widthを2回定義しています。時々我々はそれを認識しない、それは起こる。
正しいsintaxは次のとおりです。
@media all
and (min-device-width: 361px)
and (max-device-width: 640px) {
div {
background-color: blue;
}
}
申し訳ありませんが、私はそれを修正しました。あなたは今私の質問に答えることができますか？ – Mulligun81
http://plnkr.co/edit/gonecQYuAYp5YsLfzxPD?p=preview あなたのソリューションは、恐らくビューポートのメタを忘れてしまったでしょう。 –
はあなたが頭の中でビューポートを設定することがありますか？
<meta name="viewport" content="width=device-width, initial-scale=1">
あなたは、あなたの携帯電話のブラウザ対にテストしているかに応じて、最大幅と最小幅ではなく、最大-デバイス幅と最小のデバイス幅を使用して試してみたいことがあります。
このメディアクエリは、ブラウザ以外のデバイスでのみ使用します。デバイス
/* SAMSUNG NOTE 2 in PORTRAIT */
@media only screen and (-webkit-min-device-pixel-ratio: 2) and (max-device-width:1920px) and (orientation : portrait) {
\t div {
\t \t background-color: green;
\t }
}
/* SAMSUNG NOTE 2 in LANDSCAPE */
@media only screen and (-webkit-min-device-pixel-ratio: 2) and (max-device-width:1920px) and (orientation : landscape) {
\t div {
\t \t background-color: blue;
\t }
}
/* IPAD in PORTTRAIT */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 2) {
\t div {
\t \t background-color: green;
\t }
}
/* IPAD in LANDSCAPE */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 2) {
\t div {
\t \t background-color: blue;
\t }
}
/* IPHONE4 LANDSCAPE */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
\t div {
\t \t background-color: green;
\t } \t
}
/* IPHONE5 PORTRAIT */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
\t div {
\t \t background-color: blue;
\t }
}
/* SAMSUNG S4 in PORTRAIT */
@media only screen and (min-device-width : 360px) and (max-device-width : 640px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
\t div {
\t \t background-color: green;
\t }
}
/* SAMSUNG S4 in LANDSCAPE */
@media only screen and (min-device-width : 360px) and (max-device-width :640px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
\t div {
\t \t background-color: blue;
\t }
}に確認して、必ずヘッドにビューポートを設定します。メタタグgo hereビューポートの詳細については
<meta name="viewport" content="width=device-width, initial-scale=1">
。ここで
は私がより良いものを使用してい
Media Queryについての詳細はこちらを
/*========== Mobile First Method ==========*/
/* Custom, iPhone Retina */
@media only screen and (min-width : 320px) {
}
/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) {
}
/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
}
/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
}
/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
}
/*========== Non-Mobile First Method ==========*/
/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {
}
/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {
}
/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
}
/* Extra Small Devices, Phones */
@media only screen and (max-width : 480px) {
}
/* Custom, iPhone Retina */
@media only screen and (max-width : 320px) {
}
ゴーいくつかの基本的なメディアクエリリストを一覧表示します。私はこれらのメディアクエリブレークポイントがより多くのデバイスとデスクトップ画面の解像度に一致することを知ります。
すべてのメディアクエリ応答メニュー+メディアブレークポイント
@media only screen and (min-width: 320px) and (max-width: 479px){ ... }
@media only screen and (min-width: 480px) and (max-width: 767px){ ... }
@media only screen and (min-width: 768px) and (max-width: 991px){ ... }
@media only screen and (min-width: 992px) and (max-width: 1999px){ ... }
可能な重複[CSSの肖像画や風景のメディアクエリを設定するには？]（http://stackoverflow.com/questions/26861189/how- set-portrait-and-landscape-media-queries-in-css） –