Question

如果Iphone 5（320x568）处于纵向模式，其宽度为320像素。当它处于横向模式时，其宽度为320px，方向为横向，或其宽度为568px，方向为横向。我在谈论CSS看到的宽度。

换句话说，此代码是否也在横向模式下工作，因此在这种情况下，网站（由#container包装）占据整个屏幕而不仅仅是320px？

@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视为

此CSS适用的最小宽度（任何较低的值都不会计算）

同样将max-width视为

此CSS将应用的最大宽度（任何更高的值都不会计算）

请注意，您要在width:100%和320px之间的范围内应用568px。这意味着永远不会执行第max-width: 790px;行，因为最高值width:100%可以返回568px

响应式设计 - Iphone肖像vs风景

1 个答案: