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

【问题标题】：Responsive design - Iphone portrait vs landscape响应式设计 - Iphone 纵向与横向
【发布时间】：2015-03-30 22:06:04
【问题描述】：

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

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

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

【问题讨论】：

标签： html css mobile responsive-design

【解决方案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 将应用的最大宽度（任何更高的都不会计算在内）

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

【讨论】：

我明白这一点。我不知道在这个特定的例子中横向宽度是 568 还是 320？
在此特定示例中：纵向时：width:320px，横向时：width:568px。我将编辑我的答案以解决您的问题
这能回答你的问题吗？
是的，它确实回答了。