css 行内元素转换_CSS转换后获取元素尺寸

css 行内元素转换

I've been playing a lot with meta viewports recently due to seeing many HTML5 TV apps coded explicitly for 1280x720 which you'll see on many HD televisions.  We all know that it's a much better practice to use responsive design than hardcode dimensions but, that aside, meta viewports are meant to do the scaling.  So it's CSS transforms, specifically scale(), to the rescue.

我最近在meta视口中玩了很多，这是因为看到许多HTML5电视应用程序明确编码为1280x720，而您会在许多高清电视上看到它们。 我们都知道，使用响应式设计比使用硬编码尺寸要好得多，但是，此外，元视口还可以进行缩放。 因此，这是CSS转换，特别是scale()到了救援。

In creating a meta viewport shim, I needed to calculate an element's dimensions after it had been scaled.  Properties like clientWidth and innerWidth will return the element's original width, ignoring the transform.  To get the scaled size you must use getBoundingClientRect:

在创建元视口填充器时，我需要在缩放元素后计算元素的尺寸。 诸如clientWidth和innerWidth类的属性将返回元素的原始宽度，而忽略转换。 要获得缩放的大小，必须使用getBoundingClientRect ：

var originalWidth = myElement.innerWidth; // 1280
var originalHeight = myElement.innerHeight; // 720

originalElement.style.transform = 'scale(1.5)';

console.log(originalElement.getBoundingClientRect());

/*
ClientRect {
  bottom: 1080
  height: 1080
  left: 0
  right: 1920
  top: 0
  width: 1920
}
*/

The example above sets the scale and returns different desired height and width dimensions based on the scale.  getBoundingClientRect returns more than just height and width by position coordinates as well.

上面的示例设置比例尺，并根据该比例尺返回不同的所需高度和宽度尺寸。 getBoundingClientRect返回高度和宽度，还返回位置坐标。

I was worried I wouldn't be able to accomplish this feat but getBoundingClientRect was the perfect solution!

我担心我无法完成这项壮举，但是getBoundingClientRect是完美的解决方案！

翻译自: https://davidwalsh.name/get-element-dimensions-css-transform

css 行内元素转换