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

【问题标题】：Get Screen width and fixed it to fixed size获取屏幕宽度并将其固定为固定大小
【发布时间】：2015-04-15 03:35:04
【问题描述】：

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

如果我将网页加载到浏览器中并且当前屏幕宽度为 1000 像素，然后我将网页浏览器的大小调整为 700 像素宽度。但我的导航栏宽度应该是 1000px；它不能改变。这是我的要求。

【问题讨论】：

【解决方案1】：

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

还可以向window 添加一个resize 事件，以在最初加载的视口宽度下保持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>

【讨论】：

【解决方案2】：

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

#navbar {
  background-color: grey;
}

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

您需要确保以 em 像素为单位设置导航栏的宽度。如果您将其设置为百分比，那么如果其父项（我假设是主体）的宽度发生更改，它将始终更改。如果它以像素或 em 为单位设置，那么它的宽度将是静态的，只要没有代码再次更改它。

如果您的导航栏的 ID 是navbar，这基本上就是您需要的。我将它设置在文档准备中，这样它只会设置一次，当导航栏肯定可用时，但可能会有更好的设置位置，具体取决于您的具体情况。

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

【讨论】：

【解决方案3】：

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

【讨论】：