Question

我想获得屏幕大小，如果之后浏览器调整大小，则不应将其更改为新的浏览器宽度。我怎么能通过CSS做到这一点？还是jQuery？

如果我将网页加载到浏览器中并且当前屏幕宽度为1000px，之后我调整了我的Web浏览器大小，相当于700px宽度。但我的导航栏宽度应为1000px;一定不能改变。这是我的要求。

Answer 1

＆＃13;

$(document).ready(function() {
  var windowWidth = $(window).width();
  $('#navbar').width(windowWidth);
});

＆＃13;

#navbar {
  background-color: grey;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="navbar">Some Content</div>

＆＃13;

您需要确保以ems的像素为单位设置导航栏的宽度。如果你以百分比形式设置它，那么如果它的父级（我假设是正文）的宽度发生了变化，它将始终改变。如果它以像素或ems设置，那么它的宽度将是静态的，只要没有代码再次更改它。

如果导航栏的ID为navbar，那么基本上就是您需要的。我已将其设置为文档就绪，以便在导航栏确定可用时只设置一次，但可能有更好的位置来设置它，具体取决于您的具体情况。

编辑：我添加了一个代码段，显示调整屏幕大小时导航栏的宽度不会改变。它仅在就绪事件中设置，然后永远不会更改。

Answer 2

尝试将父元素width设置为所需的宽度;例如，100%;将nav宽度设置为width:calc(100%)。

还可以向resize添加window个事件，以便在最初加载的视口宽度时保持nav的宽度。

$(function() {
  var width = window.innerWidth;
  var nav = $("nav");
  
  $(window).on("resize", function() {
     nav.width(width)
  })
  
});

body {
  width:100%;
}

nav {
  width:calc(100%);
  height:24px;
  top:0px;
  background:navy;
  color:orange;
  text-align:center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<nav>nav</nav>

Answer 3

@media screen and (max-width:1000) and (min-width:700){
    background-color:red;
}
@media screen and (max-width:699){
    background-color:green;
}

获取屏幕宽度并将其固定为固定大小

3 个答案: