html - 如何使基于 Web 的响应式布局中的绝对定位也适用于移动设备？

Question

我遇到了一个 div 问题，当它位于 absolute 和 top: 12%; 时，它可以很好地处理网络响应布局中的默认媒体查询(当我收缩 window )。但是当我在开发工具中转到 iphone 移动模拟器 View 时，元素之间存在很多差距。我该如何解决这个问题？

/* default media query: */

body{
  background-color: white;
  margin: 0;
}

.buttonPress{
  width: 15px;
  position: absolute;
  right: 5%;
  top: 7%;
}

.title{
  font-size: 2.5em;
  color:black;
  text-align: center;
  position: absolute;
  top: 4%;
  left: 3%;
 }

.subtitle{
  font-size: 0.6em;
  color: black;
  position: absolute;
  top: 12%;
  left: 7%;
}


/* media query for other screen size*/
@media (min-width:576px) {
  .subtitle{
    .
    .
    .
  } 
}

html:

 <img class="buttonPress" src="menu.svg">

 <div class="title"> Title </div>
 <div class="subtitle"> SubTitle </div>

缩小时的窗口:

但是在iphone模拟器上有一个差距:

Answer 1

应该是max-width，当宽度小于或等于576px时媒体才生效。

body{
  background-color: white;
  margin: 0;
}

.buttonPress{
  width: 15px;
  position: absolute;
  right: 5%;
  top: 7%;
}

.title{
  font-size: 2.5em;
  color:black;
  text-align: center;
  position: absolute;
  top: 4%;
  left: 3%;
 }

 .subtitle{
  font-size: 6em;
  color: black;
  position: absolute;
  top: 12%;
  left: 7%;
}

@media (max-width:576px) {
  .title,.subtitle{
    font-size: 1em;
  } 
}

<div class="title"> Title </div>
 <div class="subtitle"> SubTitle </div>