html - 响应式网页设计中布局更改时 HTML 元素的切换顺序

Question

我正在构建一个响应式网站，为了获得良好的用户体验，我需要从移动设备到桌面设备进行一些布局更改。具体来说，我需要切换一些 HTML 元素的顺序。

我需要 HTML 元素在桌面和移动设备上的顺序不同。

移动

<div class="one">One</div>
<div class="two">Two</div>
<div class="three">Three</div>

为桌面切换顺序

<div class="one">One</div>
<div class="three">Three</div>
<div class="two">Two</div>

这是我想要完成的简化版本。我认为它叫做progressive enhancement .网页设计专家如何移动 html 元素？使用 JavaScript？会正常吗？是否有任何 jQuery 插件？

Answer 1

根据您的布局，有多种方法可以实现这一点。如果您的 div 在桌面上并排堆叠，在移动设备上垂直堆叠，您可以结合使用 float 和媒体查询来让它们以正确的顺序显示。

如果不是，您最后的退路可能是创建 4 个 div。

<div>one</div>
<div>three(mobile)</div>
<div>two</div>
<div>three(desktop)</div>

然后使用媒体查询根据设备隐藏相关的“三”div。