使 CSS3 微调器大小匹配元素之一答案

【问题标题】：Make CSS3 spinner size match element one使 CSS3 微调器大小匹配元素之一
【发布时间】：2017-03-02 18:09:57
【问题描述】：

我找到了一个很好的 CSS3 Spinner 的代码（来自这里的链接：https://ihatetomatoes.net/create-css3-spinning-preloader/），我在我的页面中实现了它。我想将其转换为能够以相对百分比的高度和宽度进行渲染。

CodePen 演示：

http://codepen.io/anon/pen/jBWmZY

我的问题

如何转换微调器以使其使用百分比宽度和高度而不是固定的100px。

目的是能够使其缩放到（我的代码笔上的包装器）可用高度。

正如您在演示中看到的那样，div 很小。加载器不会缩放，因为它的高度和宽度是固定的。

我尝试简单地转换如下：

.loader-spinner {
    position: relative;
}
.loader {
    width: 50%;
    height: 50%;
    min-height: 35px;
    min-width: 35px;
}

但结果不如预期。如果 div 太小，我使用 wrapper 设置 35px 最小高度，但它不能正常工作。边界半径似乎没有跟随，大小非常不匹配。在这里演示：http://codepen.io/anon/pen/jBWmKZ

我想我错过了一些关于包装或其他类似的东西。

【问题讨论】：

标签： css

【解决方案1】：

问题在于，当您将值更改为百分比时，宽度和高度不会保持同步。

加载器可以正常工作，因为高度和宽度一起形成了一个由边框半径四舍五入的正方形

将您的加载器类更改为

.loader {
        display: block;
        position: relative;
        left: 100%;
        top: 100%;
        width: 14%;                // These values roughly keep your
        height: 98%;               // width and height in sync
        border-radius: 50% !important;
        border: 3px solid transparent;
        border-top-color: #3498db;
        -webkit-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
        animation: spin 2s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */

        &:before {
            ....
        }

        &:after {
            ....
        }

这适用于 1920x1080 分辨率。您必须使用媒体查询为每个分辨率定义不同的值。

【讨论】：