文本覆盖移动视图中的框，我如何在我的代码中实现媒体查询？

Question

我尝试了不同的方法来实现媒体查询或其他选项来调整字体大小以适应不同设备的视图，但我是一个绝对的初学者，将一些代码片段放在一起。请帮助我调整代码以使其正常工作。

body {
  align-items: center;
  background-color: black;
  display: flex;
  height: 00vh;
  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: 70px;
  justify-content: center;
  margin-right: 0rem;
  padding: 3rem;
  text-align: center;
  width: auto;
  transition: all 0.3s ease;
}


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

.text-doi_ {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

<div class="doi_tuong"
             <p><font color="white" style="font-size:25px">   Lorem et ipsum Lorem et ipsum</font></p>
         </body>
    </div>
</div>

Answer 1

从 <body> 标签中删除 height: 00vh; 以解决您的问题。将以下代码替换为您的代码。

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

Answer 2

它在桌面或移动设备上不起作用的问题是因为您的标记无效并且 body 元素上有 height: 00vh;。删除它，它应该是好的。我还在您的 CSS.

中添加了一个示例媒体查询

body {
  align-items: center;
  background-color: black;
  display: flex;
  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: 70px;
  justify-content: center;
  margin-right: 0rem;
  padding: 3rem;
  text-align: center;
  width: auto;
  transition: all 0.3s ease;
}

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

.text-doi_ {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* added */

@media only screen and (max-width: 800px) {
  .doi_tuong {
    margin-top: 3rem;
  }
}

<div class="doi_tuong">
  <p style="font-size:25px; color: white;"> Lorem et ipsum Lorem et ipsum</p>
</div>

Answer 3

问题已解决。

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);
}

文本覆盖移动视图中的框，我如何在我的代码中实现媒体查询？

Text overlays the box in mobile view, how can i implement Media Query in my Code?

html

css

mpmediaquery