我该如何为我解决这个奇怪的问题

Question

您好。我对这三个元素的显示格式感到烦恼！样式中的html {font-size: 62.5%}正在减小整个页面的字体大小。

当我禁用html {font-size: 62.5%}时，这三个元素会变宽！几乎是宽屏！它变得太大了！我不知道为什么font-size: 62.5%;这么影响3块的格式化！ font-size：62.5是字体设置吗？

目前没有文本，但仍然对其起作用。为什么该行对于3个块的呈现如此重要。希望大家都清楚，有人可以帮助我。

link

Answer 1

字体大小：62.5％是此布局如何工作的关键部分，这是因为它基于rem。 rem单位基于文档根目录上的字体大小来继承其值。将字体大小设置为62.5％意味着1rem等于10px。

有关rem用法和样式的更多信息，请点击https://www.sitepoint.com/understanding-and-using-rem-units-in-css/。

有两种方法可以解决此问题。

将所有字体大小更改为rem单位。 （我的选择）

您可以将字体大小从16px更改为1.6rem。等

将rem单位更改为em并设置父字体大小

您还可以从font-size: 62.5%选择器中将html移至#global-3blocksfancy，然后将rem更改为em，这意味着父元素（global-3blocksfancy）的字体大小将决定另一个元素的大小。元素。

Answer 2

基于html和/或body元素的字体是关系的，并且像任何其他CSS属性一样，继承应用于这些选择器的值。相对字体大小和CSS em单位是一整件事。 Arno的回答相当不错。

这主要是为了使您继续使用更少的代码。您可以使图像按分辨率缩放。我的分辨率为2560x1440，因此必须缩小浏览器窗口的尺寸才能看到此问题。您应该删除width属性，而应使用max-width: 33%;（专门用于三幅图像），它可以很好地缩放，甚至不需要移动CSS媒体查询。

轻松处理那些div元素！我还强烈建议您熟悉CSS的哪些稳定方面，与15年前相比，现在是成为新手的好时机！我添加了CSS Flex（Grid还没有成熟的[[yet），当您解决它的怪癖时，它就非常强大。

div
{
 display: flex;
 justify-content: space-evenly;
}

div.card img
{
 display: block;
 height: 18rem;
 max-width: 33%;
 object-fit: cover;
}

<div class="card">
<img alt="Snowy Mountains" src="https://images.unsplash.com/photo-1519681393784-d120267933ba?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80" />
<img alt="Desert" src="https://images.unsplash.com/photo-1485160497022-3e09382fb310?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80" />
<img alt="Canyons" src="https://images.unsplash.com/photo-1506318164473-2dfd3ede3623?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3300&q=80" />
</div>