Question

我在li元素的宽度和文本大小方面遇到了麻烦。我正在使用text-size-adjust使文本在移动设备上可读，li的高度随文本而增加，但不随宽度增加，而是保持为文本的原始大小。因此文本重叠。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>BASE</title>
        <link rel="stylesheet" href="../styles/backgradient.css" />
        <link rel="stylesheet" href="../styles/base.css" />
        <link rel="stylesheet" href="../styles/navigation.css" />
    </head>
    <body>
        <nav id="navigation">
            <ul>
                <li><a href="">Projets</a></li>
                <li><a href="">Réseaux</a></li>
            </ul>
            <a>変態 白雪</a>
        </nav>
        <div id="content">

        </div>
    </body>
</html>

{{1}}

Answer 1

由于无法使用屏幕尺寸调整文本，因此必须先删除该类中定义的字体大小，然后通过使用* {}类中> vw （视口宽度）。这样，文本大小将跟随浏览器窗口的大小。尝试下面的示例，看看。有关更多信息，请检查w3文档。 https://www.w3schools.com/howto/howto_css_responsive_text.asp

* {
  font-size-adjust: 200%;
  font-size:4.5vw;
}

#navigation {
  background-color: white;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25)
}

#navigation ul {
  display: flex;
}

#navigation a {
  color: black;
  text-decoration: none;
  
}

#navigation a:visited {
  color: black;
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        
        <title>BASE</title>
        <link rel="stylesheet" href="../styles/backgradient.css" />
        <link rel="stylesheet" href="../styles/base.css" />
        <link rel="stylesheet" href="../styles/navigation.css" />
    </head>
    <body>
        <nav id="navigation">
            <ul>
                <li><a href="">Projets</a></li>
                <li><a href="">Réseaux</a></li>
            </ul>
            <a>変態 白雪</a>
        </nav>
        <div id="content">

        </div>
    </body>
</html>

<li>宽度和文字大小调整

1 个答案: