html - 如何始终使标题的宽度为 100%？

问题描述

每当我使用 google chrome 的开发工具进行响应性测试时，以及当我选择 Galaxy fold 设备或通过 chrome 开发工具缩小屏幕宽度时，当尺寸低于 300 x 655 时，标题的背景就会塌陷。如何在所有屏幕尺寸中使其宽度为 100%？

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #202063;
  color: gainsboro;
  ul {
    li {
      list-style-type: none;
      cursor: pointer;
    }
  }
  a {
    text-decoration: none;
    color: inherit;
  }
  main,
  header {
    padding: 20px;
  }
}

header {
  display: flex;
  background-color: #fff;
  color: #202063;
  font-weight: bold;
  justify-content: space-between;
  nav {
    ul {
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: row;
      li {
        margin: 0 10px;
      }
      li:hover {
        border-bottom: 2px solid rgb(255, 255, 255);
        padding-bottom: 4px;
      }
    }
  }
}

.text_center {
  text-align: center !important;
}

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./style.css" />
    <title>MrSrv7</title>
  </head>
  <body>
    <header>
      <h4 id="brand_text" class="text_center">MrSrv7</h4>
      <nav>
        <ul id="navlinks">
          <li>
            <a href="#about">
              About
            </a>
          </li>
          <li>
            <a href="#contact"> Contact </a>
          </li>
          <li>
            <a href="#testimonials"> Testimonials </a>
          </li>
        </ul>
      </nav>
    </header>
  </body>
</html>

标签： htmlcsssass

html - 如何始终使标题的宽度为 100%？

问题描述

解决方案

推荐阅读