Html、Css 媒体查询不起作用，我是初学者

Question

body {
  align-items: center;
  background-color: black;
  display: flex;
  height: 00vh;
  justify-content: center;
    
}

.doi_tuong{
  align-items: center;
  border-radius: 5px;
border-radius: 25px;
background: #121212;
      box-shadow: 
    12px 12px 16px 0 rgba(255, 255, 255, 0.3) inset,    -10px -10px 20px 0 rgba(255, 255, 255, 0.3) inset,
    -8px -8px 12px 0 rgba(255, 255, 255, 0.3) inset;
  display: flex;
  height: 200px;
  justify-content: center;
  margin-right: 4rem;
  width: 380px;
        transition: all 0.3s ease;

}

.doi_tuong:hover {
    transition: all 0.3s ease;
    transform: scale(1.05, 1.05);
}

<div class="doi_tuong"
<p><font color="white" style="font-size:25px">   PODCAST LAUNCH </font></p>
</body>
    
    </div>

请知道如何查看我的 html 和 css 代码的人帮助我确保视图在所有设备上正确显示。我是一个完全的初学者，使用我从 Codepen 复制粘贴的代码并将它们放在一起。它可以工作，但在平板电脑或手机视图中它不再适合，我尝试了媒体查询但它不起作用或者我犯了错误。

非常感谢你。

Answer 1

将宽度和高度设置为自动，然后添加一些填充。现在它可以在所有视口上工作，在小屏幕上文本可能会换行但它看起来仍然很好

body {
  align-items: center;
  background-color: black;
  display: flex;
  height: 100vh;
  justify-content: center;
  margin: 0;
}

.doi_tuong{
  align-items: center;
  border-radius: 25px;
  background: #121212;
  box-shadow: 12px 12px 16px 0 rgba(255, 255, 255, 0.3) inset, -10px -10px 20px 0 rgba(255, 255, 255, 0.3) inset, -8px -8px 12px 0 rgba(255, 255, 255, 0.3) inset;
  cursor: pointer;
  display: flex;
  height: auto;
  justify-content: center;
  margin-right: 4rem;
  padding: 2rem;
  text-align: center;
  width: auto;
  transition: all 0.3s ease;

}

.doi_tuong:hover {
  transition: all 0.3s ease;
  transform: scale(1.05, 1.05);
}

<div class="doi_tuong"
<p><font color="white" style="font-size:25px">   PODCAST LAUNCH </font></p>
</body>
    
    </div>

Html、Css 媒体查询不起作用，我是初学者

Html, Css Media Query does not work, im a Beginner

html

css

mpmediaquery