CSS em测量如何用于高度或边界半径的测量? [英] How is CSS em measurement used for height or border-radius measured?

问题描述

我了解到，"em"度量是字体大小的相对单位，相对于包含元素的字体大小(如果以px之类的绝对单位指定)，或者是浏览器中的默认字体大小

I understand that the "em" measurement is a relative unit for font-size, relative to the font-size of the containing element if it's specified in an absolute unit like px, or to the default font-size in the browser.

但是我试图了解如何使用em来测量框元素(如div)的边界半径.我假设这与使用em作为测量盒子的宽度或高度的方式有关.

But I'm trying to understand how using em as a measurement for the border-radius of a box element, like a div, works. I'm assuming it's related to how using em as a measurement for the width or height of a box works.

它仍然与字体大小有关吗?具体来说，如何测量?我已经能够找到所有关于如何计算边界半径的解释，这些解释似乎是基于px单位的.

Is it still related to font-size? How, specifically, is it measured? The explanations for how border-radius is computed that I've been able to find all seem to be based on px units.

推荐答案

我可能会误解您的问题，但我认为它的工作原理是这样的.如果字体大小为12px，并且您创建了一个边框半径为1em的框，那么它将具有12px的边框半径(如果为13px，则为13px).如果您需要框的边框半径与文本保持相同的比例，而不管文本的大小如何，这将很有用.对于瞬间，如果您有一个装有文本的盒子，可以说:

I may be misunderstanding you question, but I think it works like this. If the font size is 12px and you make a box with a border radius of 1em, then it will have a border radius of 12px (13px if it's 13px). This is useful if you need the box's border radius to stay in the same ratio to the text regardless of the text's size. For instants, if you had a box with text in it, lets say:

<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使文本框的角与比例成比例.

It would look as though the box had almost completely round corners. But lets say on an iphone, it gives the text a default size of 80px (exaggeration) it would seem as though the box had virtually flat corners. The solution is to have the box's corners scale with the text using em.

这篇关于CSS em测量如何用于高度或边界半径的测量?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！