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

Question

我花了一整天时间创建了一个可爱的导航栏，但我可以调整它的大小以将 a 元素放在平板电脑上而不开始堆叠它们的唯一方法是，如果我制作导航链接不公开，如：

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

然后只对它们使用内联。

所以我从我的导航中删除了所有的 li 部分，就像以前一样：

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

不幸的是，这给我的移动导航带来了麻烦...它确实可以通过 "press here for menu" 按钮在较小的屏幕上激活，但由于没有 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) {

Change nav-menu HTML between different screen sizes with java?