当由于可访问性原因而在浏览器设置中更改字体大小而导致溢出时，请使第一级菜单垂直

Question

我正在使用 Flexbox 创建一个简单的一级菜单（这里我有一个最小的可重现示例）。当没有足够的水平空间容纳七个链接时，我使用简单的媒体查询使菜单垂直（断点为 650 像素，我使用桌面优先方法）。 然而，出于可访问性的原因，我必须确保在缩放文本时内容仍然可以（没有溢出），但事实并非如此。 如果我用 CTRL + 进行缩放是可以的，但是如果我增加浏览器中的字体大小设置，则七个链接超出了容器，在这种情况下我不知道正确的断点。 我可以在

flex-wrap:wrap

标签上使用

ul

，但通过这种方式，链接一次会断开到一个新行，而不是菜单立即变为垂直。 您可以使用

font-size:2em

标签上的

html

来模拟浏览器中增加的字体大小（代码中有注释）。这是代码：

     * {
        box-sizing: border-box;
      }

      /* html {
        font-size: 2em;
      } */

      body {
        margin: 0;
      }

      .main-menu {
        border: 3px solid rgb(230, 121, 38);
        padding-block: 0.5rem;
        margin: 0 auto;
        display: flex;
        justify-content: center;
      }

      .main-menu ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
      }

      .main-menu ul li a {
        display: block;
        padding: 0.7rem;
        text-decoration: none;
        color: black;
        text-transform: uppercase;
        font-weight: bold;
        font-size: 1.2rem;
        border: 1px solid black;
        text-align: center;
      }

      @media (max-width: 650px) {
        .main-menu ul {
          flex-direction: column;
        }
      }

<nav class="main-menu">
      <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
        <li><a href="#">Link 5</a></li>
        <li><a href="#">Link 6</a></li>
        <li><a href="#">Link 7</a></li>
      </ul>
    </nav>

我可以预见断点（更大的断点）以使菜单垂直为

font-size:2em

但我不喜欢这个解决方案。 css中有没有解决方案只能处理这种情况？如果没有，是否存在 javascript 解决方案？

Answer 1

我自己找到了一个简单的解决方案，仅使用CSS。在 em 中设置断点就足够了，以这种方式，修改后的（也在浏览器设置中）字体大小会自动更改断点。这很简单。所以，我将 650px 更改为 40.625em

这是代码：

 function checkMenuOverflow() {
        const menuContainer = document.querySelector(".main-menu");
        const menu = document.querySelector(".main-menu ul");
        const menuWidth = menu.clientWidth; // Larghezza effettiva del contenuto
        console.log("🚀 ~ checkMenuOverflow ~ menuWidth:", menuWidth);
        const containerWidth = menuContainer.clientWidth; // Larghezza del contenitore visibile
        console.log("🚀 ~ checkMenuOverflow ~ containerWidth:", containerWidth);

        if (menuWidth > containerWidth) {
          menu.classList.add("vertical"); // Se c'è overflow, aggiungi la classe per layout verticale
        } else {
          if (menu.clientHeight < containerWidth) {
            console.log("🚀 ~ checkMenuOverflow ~ menu.clientHeight:", menu.clientHeight);
            menu.classList.remove("vertical"); // Altrimenti, rimuovi la classe verticale
          }
        }
      }

      // Verifica overflow quando la pagina viene caricata

      checkMenuOverflow();

      // Verifica overflow quando la finestra viene ridimensionata
      window.addEventListener("resize", checkMenuOverflow);

      * {
        box-sizing: border-box;
      }

      /* html {
        font-size: 2em;
      } */

      body {
        margin: 0;
      }

      .main-menu {
        border: 3px solid rgb(230, 121, 38);
        padding-block: 0.5rem;
        margin: 0 auto;
        display: flex;
        justify-content: center;
      }

      .main-menu ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-shrink: 0;
      }

      .main-menu ul.vertical {
        flex-direction: column;
      }

      .main-menu ul li a {
        display: block;
        padding: 0.7rem;
        text-decoration: none;
        color: black;
        text-transform: uppercase;
        font-weight: bold;
        font-size: 1.2rem;
        border: 1px solid black;
        text-align: center;
      }

      @media (max-width: 40.625em) {
        .main-menu ul {
          flex-direction: column;
        }
      }

 <nav class="main-menu">
      <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
        <li><a href="#">Link 5</a></li>
        <li><a href="#">Link 6</a></li>
        <li><a href="#">Link 7</a></li>
      </ul>
    </nav>