为什么我的媒体查询不能正常工作？

Question

我创建了一个网页，在桌面视图中看起来不错，但如果我更改 window 大小或在移动设备中查看，按钮和搜索栏的大小会发生变化。此外，我还在搜索栏中放置了一些图标，这些图标也会随着 window 大小的改变而改变位置。我是使用媒体查询的新手，所以请告诉我哪里出错了？我已经包含了一部分代码。

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

Answer 1

正如上面提到的 Edric：首先是规则本身，然后是它的媒体查询



.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%;}
  }

哦，你最好总是先为移动设备设计。

为什么我的媒体查询不能正常工作？

Why are my media queries not working properly?

html

css

media-queries