Box-sizing 和 Media Queries 不起作用？

Question

我想创建一个响应式页面

当页面宽度小于 1000px 时隐藏右边的聊天信息框

和

当页面小于 600px 时隐藏右侧聊天框和左侧边栏；

但我无法弄清楚我的代码有什么问题导致媒体查询无法正常工作。

此外，即使我向其添加“box-sizing: border”框，左侧栏中的搜索框也会溢出其父项。

最后一个问题是，我想让方框的垂直侧边框与页面高度相同，而不创建侧滚动条（我尝试将方框的高度设置为：100%，这是可用的，但它也创建了一个侧滚动条，这在该作业中是不允许的）。

请看下面我的代码，非常感谢：

@media screen and (max-width: 1400px;) {
  .groupsettings,
  .search {
    width: 300px;
  }
}
@media screen and (max-width: 1000px;) {
  .groupsettings {
    display: none;
  }
}
@media screen and (max-width: 600px;) {
  .search {
    display: none;
  }
}
.avatar {
  border-radius: 50%;
  height: 25px;
  margin-left: 0;
  margin-right: 10px;
  width: 25px;
}
.chatroom {
  border-right: 1px solid lightgray;
  grid-column: 2/3;
  grid-row: 2/3;
}
.groupprofile {
  border-bottom: 1px solid lightgray;
  padding: 10px;
}
.groupsettings {
  grid-column: 3/4;
  grid-row: 2/3;
  min-width: 300px;
}
.grouptitle {
  grid-column: 2/4;
  grid-row: 1/2;
}
.his {
  background-color: lightgray;
}
.his,
.mine {
  border-bottom-left-radius: 50px;
  border-bottom-right-radius: 50px;
  border-top-left-radius: 50px;
  border-top-right-radius: 50px;
  font-size: 14px;
  width: max-content;
  padding: 5px 10px 7px;
}
.loading {
  color: lightgray;
  font-size: 14px;
  text-align: center;
}
.logo {
  border-radius: 50%;
  height: 40px;
  vertical-align: middle;
  width: 40px;
}
.messenger {
  border-top: 1px solid lightgray;
  display: grid;
  grid-template-columns: 3fr 4fr 3fr;
  grid-template-rows: auto 1fr;
}
.mine {
  align-self: right;
  background-color: #0097f7;
  color: white;
  margin-left: auto;
  margin-right: 10px;
}
.name {
  color: lightgray;
  font-size: 12px;
  margin: 0;
  text-indent: 10%;
}
.normal {
  font-size: 14px;
  margin-left: 5px;
}
.options {
  color: gray;
  font-size: 14px;
  margin-left: 10px;
  margin-top: 10px;
}
.search {
  border-right: 1px solid lightgray;
  grid-column: 1/2;
  grid-row: 1/3;
  min-width: 300px;
}
.searchbox {
  background-color: lightgray;
  border: none;
  border-radius: 2px;
  box-sizing: border-box;
  color: gray;
  font-size: 12px;
  margin: 10px;
  padding-bottom: 5px;
  padding-top: 5px;
  text-align: center;
  width: 100%;
}
.searchbox:focus {
  border: none;
  padding-left: 10px;
  text-align: left;
}
.settings {
  padding: 0px;
}
.steve {
  display: flex;
  align-items: center;
  margin-left: 10px;
}
body {
  font-family: "SFUIText-Regular", "Segoe UI", "Helvetica Neue", Helvetica,
    Arial, sans-serif;
  margin: 5px 0 0;
}
strong {
  border-bottom: 1px solid lightgray;
  display: block;
  text-align: center;
  padding-bottom: 10px;
  padding-top: 10px;
}

<html>
  <head>
    <title>Messenger</title>
  </head>
  <body>
    <div class="messenger">
      <div class="search">
        <strong>Messenger</strong>
        <input class="searchbox" placeholder="Search Messenger" />
      </div>
      <div class="grouptitle"><strong>normal group chat</strong></div>
      <div class="chatroom">
        <p class="mine">Hey man, hope everything's okay!</p>
        <p class="name">Steve</p>
        <div class="steve">
          <img
            class="avatar"
            alt="mine-craft-chara"
            src="https://i.imgur.com/R10B80x.png"
          /><span class="his"
            >All good man, those stacks of diamonds coming in hot!</span
          >
        </div>
        <p class="mine">Nice - make sure to save me some haha :D</p>
      </div>
      <div class="groupsettings">
        <div class="groupprofile">
          <img
            class="logo"
            alt="mine-craft-logo"
            src="https://i.imgur.com/vWJzAsu.jpg"
          />
          <span class="normal">normal group chat</span>
        </div>
        <div class="settings">
          <p class="options">Options</p>
          <p class="loading">Loading...</p>
        </div>
      </div>
    </div>
  </body>
</html>

Answer 1

你应该把这个加到你的头上

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Answer 2

去掉max-width后的分号。

@media screen and (max-width: 1400px) {
  .groupsettings,
  .search {
    width: 300px;
  }
}
@media screen and (max-width: 1000px) {
  .groupsettings {
    display: none;
  }
}
@media screen and (max-width: 600px) {
  .search {
    display: none;
  }
}
.avatar {
  border-radius: 50%;
  height: 25px;
  margin-left: 0;
  margin-right: 10px;
  width: 25px;
}
.chatroom {
  border-right: 1px solid lightgray;
  grid-column: 2/3;
  grid-row: 2/3;
}
.groupprofile {
  border-bottom: 1px solid lightgray;
  padding: 10px;
}
.groupsettings {
  grid-column: 3/4;
  grid-row: 2/3;
  min-width: 300px;
}
.grouptitle {
  grid-column: 2/4;
  grid-row: 1/2;
}
.his {
  background-color: lightgray;
}
.his,
.mine {
  border-bottom-left-radius: 50px;
  border-bottom-right-radius: 50px;
  border-top-left-radius: 50px;
  border-top-right-radius: 50px;
  font-size: 14px;
  width: max-content;
  padding: 5px 10px 7px;
}
.loading {
  color: lightgray;
  font-size: 14px;
  text-align: center;
}
.logo {
  border-radius: 50%;
  height: 40px;
  vertical-align: middle;
  width: 40px;
}
.messenger {
  border-top: 1px solid lightgray;
  display: grid;
  grid-template-columns: 3fr 4fr 3fr;
  grid-template-rows: auto 1fr;
}
.mine {
  align-self: right;
  background-color: #0097f7;
  color: white;
  margin-left: auto;
  margin-right: 10px;
}
.name {
  color: lightgray;
  font-size: 12px;
  margin: 0;
  text-indent: 10%;
}
.normal {
  font-size: 14px;
  margin-left: 5px;
}
.options {
  color: gray;
  font-size: 14px;
  margin-left: 10px;
  margin-top: 10px;
}
.search {
  border-right: 1px solid lightgray;
  grid-column: 1/2;
  grid-row: 1/3;
  min-width: 300px;
}

.searchbox-container {
  padding: 10px;
  box-sizing: border-box;
  width: 100%;
}
  
.searchbox {
  background-color: lightgray;
  border: none;
  border-radius: 2px;
  box-sizing: border-box;
  color: gray;
  font-size: 12px;
  padding-bottom: 5px;
  padding-top: 5px;
  text-align: center;
  width: 100%;
}
.searchbox:focus {
  border: none;
  padding-left: 10px;
  text-align: left;
}
.settings {
  padding: 0px;
}
.steve {
  display: flex;
  align-items: center;
  margin-left: 10px;
}
body {
  font-family: "SFUIText-Regular", "Segoe UI", "Helvetica Neue", Helvetica,
    Arial, sans-serif;
  margin: 5px 0 0;
}
strong {
  border-bottom: 1px solid lightgray;
  display: block;
  text-align: center;
  padding-bottom: 10px;
  padding-top: 10px;
}

<html>
  <head>
    <title>Messenger</title>
  </head>
  <body>
    <div class="messenger">
      <div class="search">
        <strong>Messenger</strong>
        <div class='searchbox-container'>
          <input class="searchbox" placeholder="Search Messenger" />
        </div>
      </div>
      <div class="grouptitle"><strong>normal group chat</strong></div>
      <div class="chatroom">
        <p class="mine">Hey man, hope everything's okay!</p>
        <p class="name">Steve</p>
        <div class="steve">
          <img
            class="avatar"
            alt="mine-craft-chara"
            src="https://i.imgur.com/R10B80x.png"
          /><span class="his"
            >All good man, those stacks of diamonds coming in hot!</span
          >
        </div>
        <p class="mine">Nice - make sure to save me some haha :D</p>
      </div>
      <div class="groupsettings">
        <div class="groupprofile">
          <img
            class="logo"
            alt="mine-craft-logo"
            src="https://i.imgur.com/vWJzAsu.jpg"
          />
          <span class="normal">normal group chat</span>
        </div>
        <div class="settings">
          <p class="options">Options</p>
          <p class="loading">Loading...</p>
        </div>
      </div>
    </div>
  </body>
</html>

Box-sizing 和 Media Queries 不起作用？

Box-sizing and Media Queries not working?

html

css

media-queries

responsive-design