Question

在我编写第一个（！）响应式网站时，我正试图弄清楚我遇到的一些谜题。

在移动版本中，我设置了媒体查询，以便“nav”元素向下移动，就在页脚之前 - 而在大屏幕上，它通常会在标题之后设置。

我像这样使用了flexbox

#layout {
  display: flex;
  flex-direction: column;
}

并指定订单3为页脚，2为导航 - 在我的计算机上，调整浏览器大小，它可以正常工作。

然而，当我在我的智能手机（iPhone3，运行Safari）上测试时，它完全忽略了指令？有什么方法可以让我在移动设备上工作，而不仅仅是低分辨率？

Answer 1

@media all and (max-width: 480px) {
  #layout {
    display: flex;
    flex-direction: column;
  }
  .footer {
    order: 3;
  }
  .nav {
    order: 2;
  }
}

<div id="layout">
<header style="background-color:red; width:100%; height:100px;">Placeholder</header>

<nav class="nav">This is where navbar will go</nav>

<section style="background-color:black; width:80%; height:100px;"></section>

<footer class="footer" style="background-color:blue; width:100%">This is the footer</footer>
</div>

这是一个例子。如果我在计算机上调整浏览器的大小，导航器会向下滚动到页脚正上方。但是在我的手机上由于某种原因它会在标题后保持正确???

Answer 2

问题可能与Safari浏览器需要某些css规则的-webkit-前缀这一事实有关。你能试试这个：

.element {order: 1; -webkit-order: 1;}

Answer 3

@media all and (max-width: 480px) {
  #layout {
    display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
  }
  .footer {
    order: 3;
    -webkit-order:3;
  }
  .nav {
    order: 2;
    -webkit-order:2;
  }
}

<div id="layout">
<header style="background-color:red; width:100%; height:100px;">Placeholder</header>

<nav class="nav">This is where navbar will go</nav>

<section style="background-color:black; width:80%; height:100px;"></section>

<footer class="footer" style="background-color:blue; width:100%">This is the footer</footer>
</div>

这是我现在拥有的新代码 - 但是Safari仍然无法读取它并在任何分辨率的标题下显示导航:(

响应式设计中块的更改顺序不适用于智能手机？

3 个答案: