html - 响应式设计 - Iphone 纵向 vs 横向

Question

如果 Iphone 5 (320x568) 处于纵向模式，其宽度为 320px。当它处于横向模式时，它的宽度是 320px 并且方向是横向，或者它的宽度是 568px 并且方向是横向。我说的是 CSS 看到的宽度。

换句话说，这段代码是否也适用于横向模式，所以在这种情况下，网站(由#container 包裹)占据了整个屏幕，而不仅仅是 320 像素？

@media (max-width: 568px) and (min-width:320) {
#container {
    max-width: 790px;
    width: 100%;
      } 

Answer 1

你想要这个

纵向更高，横向更宽。

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

http://www.hongkiat.com/blog/css-orientation-styles/

简短回答:对于具有这些尺寸的 iphone 5，您的代码将始终适用。

解释:将 min-width 视为

The minimum width on which this CSS will apply (anything lower will not count)

同样将 max-width 视为

The maximum width on which this CSS will apply (anything higher will not count)

请注意，您应用的 width:100% 介于 320px 和 568px 之间。这意味着行 max-width: 790px; 永远不会被执行，因为 width:100% 可以返回的最大值是 568px