Question

我试图更改根元素的字体大小，以更改整体字体大小，边距和填充。

事情就是当我更改html标签font-size时，它会完全改变字体，但边距和填充保持不变1rem = 10px

这是一支显示我的意思的笔：

-HTML

<div class='container'>
  <h1>Hello! REM!</h1>
  <p>Hello Paragraph REM!</p>
</div>

-CSS

html { 
    font-size: 61.5%;
}

.container {
  background-color: red;
  padding: 3rem;
  margin: 3rem;
}

h1 {
  font-size: 4rem;
}

p {
  font-size: 1.8rem;
}

如果您尝试更改html元素的font-size，并且您会发现它只更改字体大小而不是边距或填充。

任何帮助将不胜感激，谢谢！

Answer 1

我看了看你的码头，发现边距和填充尺寸确实发生了变化。

从Chrome页面检查器中查看这两个屏幕截图：

62% font size

63% font size

希望这能为事情带来一些启示！

Answer 2

它似乎在chrome中运行良好。

这可能与您用来检查它的浏览器有关。

如果浏览器不支持，您可以将css隔离到默认设置px。

你要做的就是一个很好的例子，

body { font-size: 12px; margin: 0; padding: 0;}
.one, .two {
  border: solid #666;
  border-width: 10px; border-width: 0.01rem;   /* 1vw */
  border-radius: 30px; border-radius: 0.03rem; /* 3vw */
  font-size: 20px; font-size: 0.02rem;         /* 2vw */
  padding: 20px; padding: 0.02rem;             /* 2vw */
}

请在此处获取更多信息，Here

使用rem调整边距/填充

2 个答案: