CSS em测量如何用于测量高度或边界半径？

Question

据我所知,"em"测量是font-size的相对单位,相对于包含元素的字体大小,如果它以px等绝对单位指定,或者是浏览器中的默认字体大小.

但是我试图理解如何使用em作为盒子元素的边界半径的测量,就像div一样.我假设它与如何使用em作为盒子宽度或高度的测量工作有关.

它仍然与font-size有关吗？具体来说,它是如何衡量的？关于如何计算border-radius的解释似乎都是基于px单位的.

Answer 1

我可能误解了你的问题，但我认为它是这样的。如果字体大小为 12px，并且您制作一个边框半径为 1em 的框，那么它的边框半径将为 12px（如果是 13px，则边框半径为 13px）。如果您需要框的边框半径与文本保持相同的比例（无论文本大小如何），这非常有用。例如，如果您有一个包含文本的框，可以说：

<style>
  // lets say the browser gives the text a default size of 16px on a pc
  .box {border-radius:5px}// lets say the box's size scales with the text
</style>

看起来盒子的角几乎完全是圆的。但假设在 iPhone 上，它给文本的默认大小为 80px（夸张），看起来盒子几乎有平角。解决方案是使用 em 让框的角与文本一起缩放。