Question

基本上我希望当窗口变小时，我的HTML结构会重构，比宽度为400px。

<div id="mainContainer">
    <div id="div1"> -- Loads of content here -- </div>
    <div id="div2"> -- Even more content here -- </div>
    <div id="div3"> -- You can't even imagine how much content here -- </div>
</div>

现在，在用户将他/她的浏览器调整到400px以下后，我需要将div3移到div1以上，所以结构看起来像这样：

<div id="mainContainer">
    <div id="div3"> -- You can't even imagine how much content here -- </div>        
    <div id="div1"> -- Loads of content here -- </div>
    <div id="div2"> -- Even more content here -- </div>
</div>

通过使用jquery，我已经有了一个函数来测量窗口的宽度。但是我如何完成剩下的工作呢？我看了一下this sort of similar question，这让我知道我的能力如何，但它没有安静帮助我。

有什么建议吗？

Answer 1

您应该使用 CSS Media Queries 查询屏幕宽度，并进行相应调整。

并非所有浏览器都支持它。

<强> Another great article.

Answer 2

http://jsfiddle.net/tMutA/1/

您应该改为在不同的大小上定义一组索引参数，然后运行sortby。

var screenWidth = $(window).width();

if(screenWidth < 600) {
    $('#div3').prependTo($('#mainContainer'));
}

$(window).resize(function() {
var screenWidth = $(window).width();

if(screenWidth < 600) {
    $('#div3').prependTo($('#mainContainer'));
} else {
    $('#div2').prependTo($('#mainContainer'));
    $('#div1').prependTo($('#mainContainer'));
}

});

根据窗口宽度重构我的HTML

2 个答案: