如何根据不同的屏幕尺寸正确定位元素
How to position elements properly regarding different screen sizes
对于我使用 Ionic 开发的移动应用程序，我试图在女性和男性标志的圆圈内放置一个标签。但是对于不同的屏幕尺寸，定位似乎很难做到。
它应该是这样的：
但是一旦我使用更大的屏幕，它就会变成这样：
对于男性标志，我使用了 % 单位，正如 Whosebug 上经常提到的那样：
（定位是绝对的）
.gender-counter .male label{
left: 38%;
top: 28%;
}
我也尝试过使用 vw 和 vh 作为女性标志：
.gender-counter .female label{
left: 8.7vw;
top: 1vh;
}
还是一样的结果。
查看我的 CodePen 了解详情。
我知道有一种方法可以使用@media 针对不同的屏幕尺寸进行特定设计。但是，为这么多不同的尺寸设计一个设计似乎有点矫枉过正。
有更好的方法吗？
作为附带问题：
按钮不应被挤压，并且应与所有屏幕尺寸保持完美的圆形。
要使标签水平居中，您需要将以下内容添加到标签
left: 50%;
transform: translateX(-50%);
对于我使用 Ionic 开发的移动应用程序，我试图在女性和男性标志的圆圈内放置一个标签。但是对于不同的屏幕尺寸，定位似乎很难做到。
它应该是这样的：
但是一旦我使用更大的屏幕，它就会变成这样：
对于男性标志，我使用了 % 单位，正如 Whosebug 上经常提到的那样： （定位是绝对的）
.gender-counter .male label{
left: 38%;
top: 28%;
}
我也尝试过使用 vw 和 vh 作为女性标志：
.gender-counter .female label{
left: 8.7vw;
top: 1vh;
}
还是一样的结果。
查看我的 CodePen 了解详情。
我知道有一种方法可以使用@media 针对不同的屏幕尺寸进行特定设计。但是，为这么多不同的尺寸设计一个设计似乎有点矫枉过正。
有更好的方法吗？
作为附带问题： 按钮不应被挤压，并且应与所有屏幕尺寸保持完美的圆形。
要使标签水平居中，您需要将以下内容添加到标签
left: 50%;
transform: translateX(-50%);