如何根据窗口宽度触发调整大小功能

在下面的代码中，如果屏幕宽度大于1000px，我将分离导航栏并将其放在其他位置。唯一的问题是，只有刷新页面才会发生这种行为。如何根据窗口宽度触发调整大小功能

如何触发resize函数，以便在触发或刷新页面时都可以分离导航栏？

var maximum = 1000; 
var element = $('nav#site-navigation').detach();  
if($(window).width() <= maximum) { 
    element; 
    $('header').after(element); 
}

来源

2016-11-29 Ragmah

将这个代码在'调整（）'事件处理程序。另外，如果可能的话，如果您使用响应式CSS而不是JS，则会更好。 –

但是，如果我把所有东西放在一个调整大小的函数中，如果我在手机上打开网站，代码将不起作用。导致代码只会在页面被调整大小时发生。 – Ragmah

你尝试用CSS媒体查询.. – Komal

function placeHeader(){ 
    var maximum = 1000; 
    if($(window).width() <= maximum) { 

     var element = $('nav#site-navigation').detach(); 
     $('header').after(element); 
    } 
} 
$(window).load(function(){ 
    placeHeader(); 
}); 
$(window).resize(function(){ 
    placeHeader(); 
});

来源

2016-11-29 10:48:38

调Mateusz Kudej代码，有你有

function placeHeader(){ 
    var maximum = 1000; 
    if($(window).width() <= maximum) { 
     var element = $('nav#site-navigation').detach(); 
     $('header').after(element); 
    } 
    if($(window).width() > maximum) { 
     var element = $('nav#site-navigation').detach(); 
     $('div.site-branding').after(element); 
    } 
} 
$(window).load(function(){ 
    placeHeader(); 
}); 
$(window).resize(function(){ 
    placeHeader(); 
});

来源

2016-11-29 11:00:03

如何根据窗口宽度触发调整大小功能

回答

相关问题