我正在构建一个响应式网站,为了获得良好的用户体验,我需要从移动设备到桌面设备进行一些布局更改。具体来说,我需要切换一些 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 插件?
最佳答案
根据您的布局,有多种方法可以实现这一点。如果您的 div 在桌面上并排堆叠,在移动设备上垂直堆叠,您可以结合使用 float 和媒体查询来让它们以正确的顺序显示。
如果不是,您最后的退路可能是创建 4 个 div。
<div>one</div>
<div>three(mobile)</div>
<div>two</div>
<div>three(desktop)</div>
然后使用媒体查询根据设备隐藏相关的“三”div。
关于html - 响应式网页设计中布局更改时 HTML 元素的切换顺序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12859045/