jquery - 使用 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>

不幸的是，这给我的移动导航带来了麻烦......它确实在较小的屏幕上通过“按此处显示菜单”按钮激活，但由于没有 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) {