我一直在尝试通过在纯 CSS 上创建 ubuntu 徽标，以一种非常实验性的方式学习 CSS（尽管仍然很漂亮）。我现在使用的 HTML 位于http://pastebin.com/LuUABXFq并且它与像素尺寸一起正常工作，但我想将这些硬编码值交换为百分比值，以允许我以任何分辨率呈现徽标并且仍然让它以良好的比例呈现出来。
在这个过程中，我一直对一个问题感到困惑：为什么#ubuntu-CoF-faceBackground 使用视口大小而不是#ubuntu-CoF-background 父实例的大小将百分比转换为像素？现在，该代码在白色正方形上呈现一个非常大的紫色矩形，而紫色矩形应该是白色正方形大小的一半。（在 Fedora 17 x64 上的 Firefox 15 和 Chromium 20 上测试）
半功能代码可以在我的 github 上找到：https ://github.com/Drknzz/HTML-Experiments/blob/master/UbuntuLogo.html ，我只需要将朋友圈圆形对齐到顶部符合 ubuntu 品牌指南的文本。