Почему мои медиа-запросы не работают должным образом?

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

<html>
  <head>
<meta name = "viewport" content = "width=device-width, initial-scale=1" />
<style>
@media only screen and (max-width: 600px) {
div.bar{min-width: 200px;}
div.searchbar{min-width: 200px;}
div.button2{min-width: 21%;}
div.button1{min-width: 21%;}
  }
.bar{
  margin:0 auto;
  width:38.5%; 
  height:43px;
  border-radius:27px;
  border:1px solid #dcdcdc;
  max-width: 100%;}

.searchbar{
  max-width: 100%;
  height:35%;
  border:none;
  width:81%;
  font-size:14px;
  outline: none;
  margin-left:10% ;
  background-color:transparent;
  margin-top: 1%;
  max-width: 100%;
  min-width: 70%;}

.voice{
  height:50%;
  position:relative;
  top:30%;
  max-width: 100%;}

.magnif{
  height:60%;
  position:relative;
  margin-top: -9%;
  margin-left: 2%;}


.button1
{border:none;
  color:#3c4043;
  font-size:90%;
  border-radius:5%;
  outline:none;
  margin-left: 41%;
  display: inline-block;
  margin-top:0.02%;
  height:50%;
  width: 9.1%;
  padding: 9px 9px;}
</style> </body>
</head>


<body>
<div class = "header">
    <div class = "bar">
      <input class = "searchbar" type = "text" title = "Search">
      <a href = "#"> <img class = "voice" src = "https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Google_mic.svg/716px-Google_mic.svg.png"></a>
      <a href = "#"> <img class = "magnif" src = "https://cdn4.iconfinder.com/data/icons/commenly-needed/400/Icon-12-512.png"></a>
    </div>

    <body>

   <br></br>
   <button class = "button1">BUTTON1</button>
   <button class = "button2">BUTTON2</button>
</body>

@media only screen and (max-width: 600px) {
  div.bar {
    min-width: 200px;
  }
  div.searchbar {
    min-width: 200px;
  }
  div.button2 {
    min-width: 21%;
  }
  div.button1 {
    min-width: 21%;
  }
}

.bar {
  margin: 0 auto;
  width: 38.5%;
  height: 43px;
  border-radius: 27px;
  border: 1px solid #dcdcdc;
  max-width: 100%;
}

.searchbar {
  max-width: 100%;
  height: 35%;
  border: none;
  width: 81%;
  font-size: 14px;
  outline: none;
  margin-left: 10%;
  background-color: transparent;
  margin-top: 1%;
  max-width: 100%;
  min-width: 70%;
}

.voice {
  height: 50%;
  position: relative;
  top: 30%;
  max-width: 100%;
}

.magnif {
  height: 60%;
  position: relative;
  margin-top: -9%;
  margin-left: 2%;
}

.button1 {
  border: none;
  color: #3c4043;
  font-size: 90%;
  border-radius: 5%;
  outline: none;
  margin-left: 41%;
  display: inline-block;
  margin-top: 0.02%;
  height: 50%;
  width: 9.1%;
  padding: 9px 9px;
}

<div class = "header">
  <div class = "bar">
    <input class = "searchbar" type = "text" title = "Search">
    <a href = "#"> <img class = "voice" src = "https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Google_mic.svg/716px-Google_mic.svg.png"></a>
    <a href = "#"> <img class = "magnif" src = "https://cdn4.iconfinder.com/data/icons/commenly-needed/400/Icon-12-512.png"></a>
  </div>
  <br></br>
  <button class = "button1">BUTTON1</button>
  <button class = "button2">BUTTON2</button>

Медиа-запросы должны быть объявлены ниже стилей, которые вы хотите переопределить, а не выше.

— 14.12.2020 09:07

У вас также есть дополнительный тег тела

— 14.12.2020 09:11

html css media-queries

14.12.2020 09:05

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Как упоминал Эдрик выше: сначала идет само правило, затем его медиа-запрос



.bar{
  margin:0 auto;
  width:38.5%; 
  height:43px;
  border-radius:27px;
  border:1px solid #dcdcdc;
  max-width: 100%;}

.searchbar{
  max-width: 100%;
  height:35%;
  border:none;
  width:81%;
  font-size:14px;
  outline: none;
  margin-left:10% ;
  background-color:transparent;
  margin-top: 1%;
  max-width: 100%;
  min-width: 70%;}

.voice{
  height:50%;
  position:relative;
  top:30%;
  max-width: 100%;}

.magnif{
  height:60%;
  position:relative;
  margin-top: -9%;
  margin-left: 2%;}


.button1{
  border:none;
  color:#3c4043;
  font-size:90%;
  border-radius:5%;
  outline:none;
  margin-left: 41%;
  display: inline-block;
  margin-top:0.02%;
  height:50%;
  width: 9.1%;
  padding: 9px 9px;}

@media only screen and (max-width: 600px) {
div.bar{min-width: 200px;}
div.searchbar{min-width: 200px;}
div.button2{min-width: 21%;}
div.button1{min-width: 21%;}
  }

О, и вам лучше всегда сначала создавать дизайн для мобильных устройств.

14.12.2020 09:18