响应式网页设计中布局变化时HTML元素的切换顺序

发布时间：2020-12-14 19:35:34 所属栏目：资源来源：网络整理

导读：我正在建立一个响应式的网站,为了获得良好的用户体验,我需要从移动到桌面的一些布局更改.具体来说,我需要切换一些 HTML元素的顺序. 我需要HTML元素与桌面vs手机的顺序不同. 移动 div class="one"One/divdiv class="two"Two/divdiv class="three"Three/div 为

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

我需要HTML元素与桌面vs手机的顺序不同.

移动

<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插件？

解决方法

只需使用jQuery根据需要更改DOM

if (mobile == true) {

    $('div.three').insertBefore($('div.two'));
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!