将像素转换为百分比

Question

我想使用CSS进行转换，但我的元素的维度通常以像素为单位，但在:hover事件期间以百分比为单位，转换不能像这样工作。你知道怎么做吗？

Answer 1

您可以在%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;
}

小心最小宽度强于宽度

下面是一个工作示例。它适用于所有浏览器，当然不支持转换的IE除外，但它会适度降级，所以我们可以说它适用于任何地方：）

干杯

Answer 2

它工作得很好-http://jsfiddle.net/eCxQP/

正常宽度-以像素为单位，悬停-以百分比为单位

body {
     width: 100%;
 }

 div  {
     width:100px;
     height:100px;
     background:red;
     transition:width 2s;
     -moz-transition:width 2s; /* Firefox 4 */
     -webkit-transition:width 2s; /* Safari and Chrome */
     -o-transition:width 2s; /* Opera */
 }
 div:hover {
     width:33%;
 }

UPDATE：适用于FF，而不是基于Webkit的浏览器

Answer 3

我在Firefox上运行良好，但在需要使用相同单元的Chromium上运行不好。

Answer 4

我知道这已经很老了，但如果你的支持是IE9或更高版本，你可以做这样的事情。。。

在Css 中

div{ width:100%; transition: width .2s ease;}
div.set-px-width { width: calc(0% + 50px); }

在JS 中

div.className += "set-px-width"

通过使用百分比为0的calc，以上内容将从100%宽度转换为50px宽度。这似乎仍然将宽度视为百分比，并将适当地转换

Answer 5

计算百分比值后，您可能需要使用JavaScript将其更改为像素。我认为webkit以px为单位报告维度，而不管它们在通过JavaScript调用时是如何设置的。