可变宽度介质查询

Variable Width Media Queries

本文关键字：介质 查询      更新时间：2023-09-26

我已经做了很多挖掘，似乎找不到人们如何处理可变宽度元素的内容重组。

例如，如果我有一个动态创建的水平菜单，它可能只有3个项目。。

<div>
    <ul>
        <li>Home</li>
        <li>About</li>
        <li>Contact</li>
    </ul>
</div>

这个菜单只有很小的宽度，比方说400px。但是，当窗口低于400px时，我可以创建一个媒体查询来调整它的显示方式。。

如果用户添加了另一个项目。。

<div>
    <ul>
        <li>Home</li>
        <li>About</li>
        <li>Location</li>
        <li>Contact</li>
    </ul>
</div>

突然间，这个菜单比400px大了，等等。我的问题是，我如何构建我的代码来处理可变的元素宽度，并仍然控制它的显示方式？

编辑：当我在水平菜单上以一定的可变宽度重新调整浏览器窗口的大小时，内联块li元素会落在菜单的其余部分下面。我更喜欢将整个菜单垂直放置，而不是在屏幕压缩时让每个元素都下降。我不能简单地使用媒体查询，因为菜单项的数量是可变的。为了说明这个问题，请尝试重新调整此fiddle中的示例代码的大小：https://jsfiddle.net/f5Lv73hp/

我不理解你的问题，所以，请考虑编辑你的帖子，提供更多信息，包括你认为。。。

顺便说一下：

  1. 水平菜单，如果你需要保持所有列表项的宽度相同，你可以使用显示表，没有任何javascript要求，只需将列表设置为一个表（请参阅.Menu Horizontal css）

function CasesCtrl($) {
  var case1 = $('#case1');
  $('button', case1).click(function() {
    var list = $('ul', case1);
    var len = $('li', list).length;
    var newItem = '' +
        '<li class="menu-item">' + 
          '<a class="menu-item-link">Item '+ (len + 1) +'</a>' + 
        '</li>'
      ;
    
    list.append(newItem);
  });
  
}
jQuery(document).ready(CasesCtrl);
article {
  width: 100%;
  padding: 2px;
  border: 1px solid black;
  margin-bottom: 2em;
  overflow: hidden;
}
.menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
.menu-item {
}
.menu-item-link {
  background: lightseagreen;
  margin: 2px;
  padding: 2px 5px;
  display: block;
  text-transform: uppercase;
  line-height: 1;
}

.menu-horizontal {
  display: table;
}
.menu-horizontal .menu-item {
  display: table-cell;
  width: 1%;
  white-space: nowrap;
  overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<article id="case1">
  <ul class="menu menu-horizontal">
    <li class="menu-item">
      <a href="#" class="menu-item-link">Item 1</a>
    </li>
    <li class="menu-item">
      <a href="#" class="menu-item-link">Item 2</a>
    </li>
    <li class="menu-item">
      <a href="#" class="menu-item-link">Item 3</a>
    </li>
  </ul>
  <button type="button">Add Menu Item</button>
</article>

更具体一点，我会根据您的需要编辑我的答案！

你在找这样的东西吗？https://jsfiddle.net/4p18mxg9/2/

我使用javascript获取ul的宽度，并将宽度应用于媒体查询，这样，当您添加更多的li时，它就不依赖于内容。

var width = document.getElementById('ul').offsetWidth;
document.querySelector('style').textContent +=
    "@media screen and (max-width:" + width + "px) { li{float: none; width: 100%; background-color: blue; color: white;}}"

添加了一些颜色，以便查看：https://jsfiddle.net/4p18mxg9/3/

相关文章：