CSS 媒体查询，切换方向时破坏布局。

Question

遇到了一个奇怪的错误--当我在竖屏模式下启动我的平板电脑（使用Nexys 7 2013型号）时，它加载了正确的样式表，当我切换到横屏时，它加载了那个正确的样式表，但是当我切换回竖屏时，它不再加载竖屏样式表。这是怎么回事？

相关代码：

<link rel="stylesheet" type="text/css"
      media="only screen and (max-device-width: 800px) and (-webkit-min-device-pixel-ratio: 2.0) and (orientation: portrait)"
      href="tablet_portrait.css">
<link rel="stylesheet" type="text/css"
      media="only screen and (max-device-width: 800px) and (-webkit-min-device-pixel-ratio: 2.0) and (orientation: landscape)"
      href="tablet_landscape.css">

当我从不同的屏幕方向切换回来时，是否需要放入某种代码来确定加载什么内容？我还没有在手机布局上进行测试，但我认为它会做同样的事情。

谢谢！

- shan

Answer 1

我没有nexus-7来测试，但在这种情况下，我建议您尝试使用一个样式表来处理您的媒体查询，并像以下方式列出它们。这样网页就不必在样式表之间来回切换。

@media="only screen and (max-device-width: 800px) and (-webkit-min-device-pixel-ratio: 2.0) and (orientation: portrait) {
    styles here...
}

@media="only screen and (max-device-width: 800px) and (-webkit-min-device-pixel-ratio: 2.0) and (orientation: portrait) {
    styles here...
}

- Micah