从px转换％的CSS转换不起作用
[英]CSS Transform with % convert from px dont work
问题描述
I have this code: 
我有以下代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div style="width:50%;height:30%;background:#65C6BB;position:absolute;transform: translate(20px,0px);"> </div> </body> </html>
I wanted to convert the CSS property ' transform ' to percentage. 我想将CSS属性'transform'转换为百分比。
I using the rule : (100 / window.innerWidth) *pixels 我使用规则： (100 / window.innerWidth) *pixels
Just doing it my result to a Window Width of 1920 is 1.0416666666666667 只是将其结果设为1920的窗口宽度为1.0416666666666667
If I replace it in the property CSS transform to transform: translate(1.0416666666666667%,0px); 如果我将其替换为CSS转换属性，则可以转换为transform: translate(1.0416666666666667%,0px);
The div will not stay in the same position. div不会停留在同一位置。 I've tried using window.document.body.offsetWidth but don't works too. 我试过使用window.document.body.offsetWidth，但也不起作用。
PS: with width and height is working. PS：宽度和高度都可以。
Sorry for my English. 对不起我的英语不好。
1 个解决方案
解决方案1
0 2016-03-15 20:54:57
Transform using % moves the element with respect to element's size and not its parent's size. 使用％进行转换会相对于元素的大小而不是其父元素的大小移动元素。 The formula should be (100 / element.offsetWidth) * pixels 公式应为(100 / element.offsetWidth) * pixels
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.