jquery - 页面缩放/内容重叠

Question

我有一个高度为 50 像素的顶部 div，宽度必须是整个浏览器窗口的宽度。我正在设置`width: 100%;但问题是，当我放大时，放置在里面的其他内容会重叠到其他内容上。我知道宽度:100%；将始终与当前缩放的屏幕一样多，这就是内容重叠的原因。

这个div的位置是固定的。我尝试使用 jQuery 设置宽度并且它有效，但是当缩小顶部 div 时，将无法保持最大可用屏幕宽度。

(document).ready(function(){
    var widthT = $(window).width();
    $('#top_status').css("width", widthT);
});

上面的 jQuery 可以很好地放大，但不能缩小，因为宽度已经设置并且没有改变。

我正在尝试获得某种以某种方式作为 facebook 顶部蓝色条工作的东西。无论缩放如何，那个都很好地保持在原位。

谢谢

Answer 1

如果您发布 jsFiddle，我们可以帮助您提供具体示例，但您应该能够使用 Media Queries 解决这些问题.它们会让您在调整窗口大小时控制断点，并确保无论以何种分辨率查看网站，它看起来都不错。

以下是导航中媒体查询的一些资源:

A Responsive Design Approach for Navigation

Progressive And Responsive Navigation

Convert a Menu to a Dropdown for Small Screens

Create A Pure CSS Responsive Menu

Responsive drop down menu with CSS media queries & jQuery

即使您不想更改结构或将其变成下拉菜单，您也可以使用相同的媒体查询来调整菜单元素以使其适合任何位置。