Css 如何缩放MDL微调器？

有没有办法缩放MDL微调器？我试图改变它的

widt

和

height

属性，但它变薄了。看一看:

CSS

width: 150px; 
height: 150px

.mdl-spinner {
  width: 28px;
  height: 28px;
}

.mdl-spinner__circle {
  border-width: 3px;
}

.mdl-spinner {
  width: 84px;
  height: 84px;
}

.mdl-spinner__circle {
  border-width: 9px;
}

结果

找到了

您需要设置新属性

CSS

width: 150px; 
height: 150px

.mdl-spinner {
  width: 28px;
  height: 28px;
}

.mdl-spinner__circle {
  border-width: 3px;
}

.mdl-spinner {
  width: 84px;
  height: 84px;
}

.mdl-spinner__circle {
  border-width: 9px;
}

并按28/3的比例进行调整。比方说，如果您想将其放大3倍，那么您的代码将如下所示：

CSS

width: 150px; 
height: 150px

.mdl-spinner {
  width: 28px;
  height: 28px;
}

.mdl-spinner__circle {
  border-width: 3px;
}

.mdl-spinner {
  width: 84px;
  height: 84px;
}

.mdl-spinner__circle {
  border-width: 9px;
}

---

小心！如果缩放超过10倍，它确实会影响FPS。

我不得不使用

！重要信息

.mdl微调器{
宽度：64px！重要；
高度：64px！重要；
}
.mdl-spinner\u圆{
边框宽度：6px！重要；
}

您是否尝试过：

变换：比例（1.5）例如？是的。它会带来意想不到的行为。期望的结果是什么？只是扩大规模。保持比例，但只是让它更大。边界是固定的，所以自然地，如果容器更大，它们看起来会“更薄”。如果我没有错的话，您可以更改
的
边框宽度
值
，默认值为
3px
。这完全是代码片段的问题。在包含MDL样式表后重写样式的本地环境中，您将无法获得它。在没有
的情况下，在CodePen上可以正常工作！重要信息