将像素转换为百分比

Question

我想使用CSS进行转换,但我的元素的尺寸通常以像素为单位,但在:hover事件期间以百分比表示,并且转换不会像这样工作.你知道怎么办？

Answer 1

您可以在%宽度上应用转换,只使用min-width作为px固定值.

.elem {
    min-width:50px; /* min-width as the pixel value */ 
    width:0%; /* width as the % value */ 
    transition:width .8s ease; /* transition applied to width */
}
.apply-new-width {
    width:100% !important;
}

小心最小宽度比宽度强.因此,当您应用新宽度(以%为单位)时,min-width仍会覆盖它.您有几个选项可以处理:增加.apply-new-width 特性(例如:.elem.apply-new-width或div.apply-new-width)或使用!important规则.通常!重要的是一个糟糕的解决方案,但在这里它可以解决问题

这是一个工作例子的jsfiddle.它适用于所有浏览器,当然除了IE不支持转换,但它优雅地降级,所以我们可以说它适用于每个地方:)

干杯

Answer 2

计算后，您可能必须使用 JavaScript 将百分比值更改为像素。我认为 webkit 报告的尺寸以 px 为单位，无论通过 JavaScript 调用时如何设置它们。