Не работает форматирование полей и медиа-запросы?

ProgramBox

Не работает форматирование полей и медиа-запросы?

Post author:admin
Запись опубликована:30 марта, 2023
Post category:Вопросы по программированию

#html #css #responsive-design #media-queries

#HTML #css #адаптивный дизайн #медиа-запросы

Вопрос:

Я хотел бы создать адаптивную страницу, которая

скрывает нужное информационное окно чата, когда страница имеет ширину менее 1000 пикселей

скрывает как правое окно чата, так и левую боковую панель, когда размер страницы меньше 600 пикселей;

но я не могу понять, что не так с моим кодом, который приводит к тому, что медиа-запросы не работают.

Кроме того, поле поиска в левой боковой панели переполняет родительский элемент, даже если я добавлю к нему поле «размер поля: граница».

Последний вопрос заключается в том, что я хотел бы сделать вертикальные боковые границы полей такой же высоты, что и высота страницы, без создания боковой полосы прокрутки (я попытался сделать высоту в штучной упаковке: 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>

Ответ №1:

Удалите точки с запятой после максимальной ширины.

 @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>

1. Большое спасибо! Это сработало для проблемы с медиа-запросом! Но как мне разрешить окно поиска на левой боковой панели, переполняющее его родительский элемент? Также я замечаю, что между нижними границами между блоками образуется пробел, который, я думаю, также относится к тому же вопросу, что и выше, как я должен это исправить?

2. Исправлена проблема, связанная с окном поиска. Вы должны удалить margin: 10px в окне поиска. Если это не обязательно должно быть ровно 10 пикселей, вы могли бы использовать что-то вроде width: 90% вместо 100%, или альтернативным методом было бы создать родительский контейнер с padding: 10px вокруг него. Я не понял, что вы имели в виду относительно границ.

3. Потрясающе, я добавил div в поле поиска, и это сработало! Для решения проблемы с границами я пересмотрю свой вопрос и загружу пару фотографий. Еще раз спасибо!

Ответ №2:

вы должны добавить это в свою голову

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

1. Спасибо, я добавил эту строку, что она делает?

2. в основном это сообщает браузеру, что веб-сайт должен быть адаптивным веб-сайтом

3. Круто, сделаны заметки. Спасибо!