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">

我需要输入某种代码来确定从我切换到的任何方向返回时要加载什么？我没有在手机布局上测试它，但我认为它做同样的事情。

谢谢！

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...
}

css媒体查询，在方向之间切换打破布局

1 个答案: