响应式设计 - Iphone 纵向与横向

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)

请注意，您正在 320px 和 568px 之间应用 width:100%。这意味着行 max-width: 790px; 永远不会被执行，因为最高值 width:100% 可以 return 是 568px

响应式设计 - Iphone 纵向与横向

Responsive design - Iphone portrait vs landscape

html

css

mobile

responsive-design