css media query max-device-width

Question

如果我有css 3媒体查询max-device-width，这会在设备方向发生变化时发生变化吗？

例如，如果iPhone从纵向移动到横向，那么最大设备宽度会发生变化吗？

Answer 1

这与iPhone，iPad等不同于其他设备。对于Apple产品，device-width值保持不变，但使用其他设备更改方向可能会导致应用其他规则。

最可靠的方法是使用min / max-width代替min / max-device-width。这些取决于视口的大小，并且在不同设备之间保持一致。

Answer 2

它不会改变方向

@media screen and (orientation:portrait) {
/* Portrait styles */
}
@media screen and (orientation:landscape) {
/* Landscape styles */
}