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

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将绕过您对先前容器中的font-size所做的任何更改。

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

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

Answer 2

您可以通过调试来检查在其他设备中看到它是否被覆盖 如果是这种情况，您可以在您的风格之后添加!important

width: 52.9134px !important;

同样适用于其他所有款式。

或者，如果他们没有被覆盖并且您不想使用!important（因为有人会说根据标准不合适），那么使用可以使用max和根据您的需要min 如果它们看起来比min-width: 52.9134px小，或者看起来比max-width: 52.9134px大。其他款式也是如此。

但请记住，如果!important max被覆盖，则必须使用min。

Answer 3

要防止从手机和平板电脑“智能”调整大小，您应该将元视口标记添加到文档的head：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

此标记指示浏览器不缩小。它指示浏览器坚持设备宽度而不是缩放。