使用java更改不同屏幕尺寸之间的导航菜单HTML？

Question

我花了一整天时间创建了一个可爱的导航栏，但我唯一可以让它调整大小足以将a-elements放在平板电脑上而不开始堆叠它们，如果我让导航链接不公开，如同，仅作为：

<a href="page1.html" id="temp">Temp</a>
<a href="page2.html" id="temp2">Temperature</a> 

然后只使用内联。

所以我从nav中删除了所有li部分，就像之前一样：

 <ul>
    <li><a href="page1.html" id="temp">Temp</a></li>
    <li><a href="page2.html" id="temp2">Temperature</a></li>  
    </ul>

不幸的是，这让我的移动导航系统陷入困境......它通过“按此处输入菜单”按钮在较小的屏幕上激活，但由于没有显示的li，所以没有任何内容......显示了一些图像在较大的导航菜单上也会在移动屏幕上无用地浮动。

所以我尝试在我的索引中执行此操作：

  <div id="navstor"><a href="navstor.html" ></a></div>
    <div id="navlille"><a href="navlille.html"></a></div>

并将其添加到我的script.js

$(document).ready(function(){

if ( $(window).width() > 641) {
  $("#Navstor").load("navstor"); {
}
else {
  $("#Navlille").load("navlille"); {
}

我认为这不起作用。我很新，几乎从不使用javascript。请帮忙吗？

Answer 1

您无需删除标记，也不需要javascript。这是CSS media queries的工作。

这样的东西可以让你在最小和最大宽度之间应用一种风格，尽管设置几个断点只需要一个最小值或最大值是比较常见的。

@media screen and (max-width: 1024px) and (min-width: 768px) {