Vue：div旋转后如何自适应屏幕大小？

前两天做一个需求，手机端查看图表，纵向查看图表显示太小了，我就说服产品直接横向看，横向查看没有问题，但是适配屏幕怎么做呢？然后就有了下面的demo示例，用到的可以参考试试。

html代码:

<div ref="contentRef" class="content">
    <div class="chilren" ref="chilrenRef" 
    ​​​​​​​     :style="{width:offsetWidth,height:offsetHeight,top:top,left:left}">
    </div>
</div>

 js代码：

export default {
		data() {
			return {
				offsetWidth:'100%',
				offsetHeight:'100%',
				top:0,
				left:0
			}
		},
		mounted(){
			let contentRef = this.$refs.contentRef;

			let offsetWidth=contentRef.offsetWidth;
			let offsetHeight=contentRef.offsetHeight;
			this.offsetWidth=offsetHeight+'px';
			this.offsetHeight=offsetWidth+'px';
			this.top=((offsetHeight-offsetWidth)/2)+'px';
			this.left=-((offsetHeight-offsetWidth)/2)+'px';
		}
	}

css代码：

<style lang="less">
	.content{
		width: 100%;
		height: 100%;
		position: relative;

		.children{
			position: absolute;
			top: 0;
			left: 0;
			background: pink;
			transform: rotate(90deg);
		}	
	}
</style>

 直接上代码简单明了，还看不懂的可以发私信，看到会回复。。

Tips:文中如有疑问或者错处，可以私信“且慢码农”。