html - 每个设备屏幕中元素的大小一致

Question

这是我的代码:

<div class="box cntr" style="width: 52.9134px; height: 52.9134px; background: #c04848; border-radius: 50%;">
    <h2 id="amount" style="text-align: center">3</h2>
  </div>

宽度为 52.9134px 但当您在其他设备上打开它时，该元素将变得比桌面屏幕上的原始尺寸小。我希望该元素在所有设备(如 iPhone、iPad、Android 手机等)中大小相同。

Answer 1

你可以使用

.myClass{
    height: 15vw; /* or vh */
    width: 15vw; /* or vh */
}

在屏幕和元素之间保持固定的纵横比。

但是纵向和横向模式会有些麻烦。您需要编写一个媒体查询或使用 js 来解决这个问题。

您也可以使用 em 或 rem。 rem 会绕过您对先前容器中的字体大小所做的任何更改。

您是否在 HTML 中设置了视口(viewport)？

您是否在 html 或 body 元素上设置了宽度？