如何始终使标题的宽度为 100%？答案

【问题标题】：How to make the width of header 100% all the time?如何始终使标题的宽度为 100%？
【发布时间】：2021-04-29 00:06:50
【问题描述】：

每当我使用 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>

【问题讨论】：

你能在 jsfiddle 或类似的地方创建演示并在这里分享吗？
我添加了@ImBhavin95
我已经运行了你的代码，但它显示的每个尺寸都是 100% 的宽度。

标签： html css sass

【解决方案1】：

你需要在标签中添加：width=device-width

        * {
            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">
        <title>Document</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>

【讨论】：

您可以使用 CSS：@media (max-width: 300){ 任何您的 css 宽度设备

【解决方案2】：

您是否尝试将最小宽度设置为 100%？我不确定你的导航栏目前是什么样子的。

   header{
         min-width:100%
        }

【讨论】：

试过了，我什至在这条规则中添加了 !important
body{ margin:0} - 试试这个:)