（移动网络开发）如何制作一个带有＆＃34; border-radius：50％＆＃34;当它的宽度是百分之80％

Question

我曾经做过一个带有＆＃34;宽度：100px;高度：100px; border-radius：50％＆＃34;在PC; 但是当我在移动设备上做同样的事情时会出现问题，因为PC中的宽度是＆＃34; px＆＃34;，移动设备的宽度是＆＃34;％＆＃34;，所以我不能确保移动设备的宽度和移动设备相同;

＆＃13;

＆＃13;

div{border:1px solid #ddd;border-radius:50%;width:80%;height:???}

＆＃13;

<div></div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

只需添加与您的宽度相同的padding-top。

$cell->getHyperlink()->setUrl();

Answer 2

正方形（高度=宽度）上的
• border-radius: 50%将永远存在 圈。
  
• 并使用动态测量（％，rem，em， VH，VW）。
  我建议宽度和高度为 vh 或宽度为高度 vw 。
  例如：width: 50vw; height: 50vw; （如果尺寸大于50，可能会溢出）
  其他动态测量值会变形而不是溢出。你可以在这里测试它们：https://jsfiddle.net/gkbfo832/1/

Answer 3

如果div是已知高度和宽度的父元素的子元素，则可以使用%作为相对大小的方法。例如，我明确设置了body尺寸，并且可以使div成为body的宽度/高度百分比。

body {
  width: 500px;
  height: 500px;
}

div {
  border: 1px solid #ddd;
  border-radius: 50%;
  width: 80%;
  height: 80%;
}

<div></div>