我正在我的网站上创建一个断点,以便它可以响应平板电脑和移动设备。一切顺利,除了我想从底部移动一段内容并将其附加到导航下方。
我有一个简单的两列布局右列和左列。HTML 片段位于右栏中。我需要检测屏幕大小何时等于或低于 558 像素,然后四处移动。
HTML:
<div class="main wrapper">
<div class="content-left"></div>
<div class="content-right">
// three divs containing awesome content
</div>
</div>
jQuery:
<script>
var windowsize = $(window).width();
if (windowsize < 559) {
//if the window is less than 559px wide then prepend the following
console.log('Window resized!!!');
$(".now-playing-title, h1.now-playing-title, .live-now-block, .now-playing").prependTo('.content-left');
}
</script>
工作解决方案:我使用 .insertBefore() 而不是 .preprend() (它将所有内容移动到左列 div 中)并用 document.ready() 将其全部包裹起来,以便在页面完全加载后触发。
<script>
$(document).ready(function() {
var windowsize = $(window).width();
if (windowsize < 559) {
//if the window is less than 559px wide then append NowPlaying
console.log('Window resized!!!');
$(".now-playing-title, h1.now-playing-title, .live-now-block, .now-playing").insertBefore('.content-left');
}
});
</script>