将像素转换为百分比

Posted 2023-05-07

【中文标题】将像素转换为百分比

【英文标题】：Transition pixel to percent

【发布时间】：2012-02-17 00:47:32

【问题描述】：

我想使用 CSS 进行过渡，但我的元素尺寸通常以像素为单位，但在 :hover 事件期间以百分比为单位，并且过渡不是这样工作的。你知道有什么办法吗？

【参考方案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 比 width 强。因此，当您应用新宽度（以 % 为单位）时，min-width 仍将覆盖它。您有几个选项来处理这个问题：增加 .apply-new-width specificity（例如：.elem.apply-new-width 或 div.apply-new-width）或使用 !important 规则。通常 !important 是一个糟糕的解决方案，但在这里它可以解决问题。

这是一个工作示例的jsfiddle。它适用于所有浏览器，当然在不支持转换的 IE 中除外，但它会优雅地降级，因此我们可以说它适用于任何地方:)

干杯

【讨论】：

这是个好主意。以此为基础——为什么不只是为 min-width 值设置动画呢？那么就不需要使用!important。这是我对您的小提琴的编辑：jsfiddle.net/judNR/7

【参考方案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%;
 

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

【参考方案3】：

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

【参考方案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 宽度。这似乎仍将宽度视为百分比，并将适当地转换

【参考方案5】：

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