我有以下代码：
@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（纵向）时会发生这种情况？
【问题讨论】：
始终在 head 中设置 viewport。
<meta name="viewport" content="width=device-width, initial-scale=1">
有关视口元标记的更多详细信息go here。
这里列出一些基本的媒体查询列表
/*========== 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 Query的详情
我正在使用更好的。我发现这些媒体查询断点匹配更多设备和桌面屏幕分辨率。
所有媒体查询响应式菜单+媒体断点
@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){ ... }
【讨论】：
此媒体查询仅用于设备而非浏览器。检查设备
/* SAMSUNG NOTE 2 in PORTRAIT */
@media only screen and (-webkit-min-device-pixel-ratio: 2) and (max-device-width:1920px) and (orientation : portrait) {
div {
background-color: green;
}
}
/* SAMSUNG NOTE 2 in LANDSCAPE */
@media only screen and (-webkit-min-device-pixel-ratio: 2) and (max-device-width:1920px) and (orientation : landscape) {
div {
background-color: blue;
}
}
/* 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) {
div {
background-color: green;
}
}
/* 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) {
div {
background-color: blue;
}
}
/* 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) {
div {
background-color: green;
}
}
/* 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) {
div {
background-color: blue;
}
}
/* 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) {
div {
background-color: green;
}
}
/* 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) {
div {
background-color: blue;
}
}【讨论】：
你是否在头部设置了视口？
<meta name="viewport" content="width=device-width, initial-scale=1">
您可能想尝试使用 max-width 和 min-width 而不是 max-device-width 和 min-device-width，具体取决于您是在浏览器还是在手机上进行测试。
【讨论】：
您定义了两次max-device-width。有时我们没有意识到，它发生了。
正确的语法是：
@media all
and (min-device-width: 361px)
and (max-device-width: 640px) {
div {
background-color: blue;
}
}
【讨论】：