Vue2 窗口自适应

在前端开发的广阔天地中，长度单位的选取无疑是一门精深的学问。尤其在追求响应式设计和页面一致性的当下，如何恰到好处地运用各种长度单位，成为了一个值得深入探讨的话题。本文将带领大家走进像素(px)、视窗单位(vw/vh)和根元素单位(rem)的世界，解析它们之间的微妙差异，并探讨在实际应用中如何明智地选择。

一、像素px——固定单位

像素px，作为数字图像的基本单元，在前端开发中扮演着举足轻重的角色。它的优点在于精确性，能够确保元素在特定分辨率下的精确呈现。然而，像素的缺点也显而易见：它不具备响应性，当屏幕尺寸或分辨率发生变化时，以像素为单位的元素大小可能会显得格格不入。

二、视窗单位vw/vh——相对单位

视窗单位(vw/vh)，视窗单位是一种相对单位，其中vw代表视窗宽度的百分比，vh代表视窗高度的百分比。这意味着使用vw/vh单位的元素会根据视窗的大小自动调整尺寸，从而实现真正的响应式设计。视窗单位的优势在于其灵活性和适应性，使得页面在不同设备和屏幕尺寸上都能呈现出良好的视觉效果。然而，过度使用视窗单位可能导致页面布局在极端屏幕尺寸下出现问题，因此需要谨慎使用。

三、根元素单位rem

根元素单位(rem)，rem是相对于根元素(html)字体大小的单位。这意味着当根元素的字体大小发生变化时，所有使用rem单位的元素都会相应地调整尺寸。这使得rem在全局样式调整中具有得天独厚的优势。此外，与视窗单位相比，rem单位在极端屏幕尺寸下的表现更为稳定。然而，使用rem单位需要注意与字体大小的关联，以及在不同上下文中可能产生的差异。

那么，在实际应用中如何选择合适的长度单位呢？这需要根据项目的具体需求和目标来权衡。对于需要精确控制尺寸的元素，像素可能是一个不错的选择；对于追求响应式设计的项目，视窗单位能够带来更好的灵活性和适应性；而在需要全局调整样式的情况下，根元素单位则可能更具优势。当然，在实际开发中，我们往往需要根据具体情况综合运用这些长度单位，以达到最佳的视觉效果和用户体验。

echarts 树状图示例

<template>
    <div :id="id" :option="option" :style="chartStyle"></div>
</template>

<script>
import * as Charts from 'echarts';
export default {
    props: {
        id: {
            default: "myChart"
        },
    },
    data() {
        return {
            chartInstance: null,
            option: {
                series: [
                    {
                        type: 'tree',
                        id: 0,
                        name: 'tree1',
                        data: [],
                        top: '10%',
                        left: '5%',
                        bottom: '22%',
                        right: '5%',
                        orient: 'vertical',
                        symbolSize: 14,
                        edgeShape: 'polyline',
                        edgeForkPosition: '63%',
                        initialTreeDepth: 3,
                        lineStyle: {
                            width: 2
                        },
                        label: {
                            backgroundColor: '#fff',
                            position: 'left',
                            verticalAlign: 'middle',
                            align: 'right'
                        },
                        leaves: {
                            label: {
                                position: 'vertical', // 所有叶子节点也设置为竖直放置
                                rotate: 90, // 旋转标签以便更好的阅读
                            }
                        },
                        emphasis: {
                            focus: 'descendant'
                        },
                        expandAndCollapse: true,
                        animationDuration: 550,
                        animationDurationUpdate: 750
                    }
                ]
            },
            chartStyle: {
                height: "1000px", width: "100%",
            },
            dataList: [
                {
                    name: 'flare',
                    children: [
                        {
                            name: 'data',
                            children: [
                                {
                                    name: 'converters',
                                    children: [
                                        { name: 'Converters', value: 721 },
                                        { name: 'DelimitedTextConverter', value: 4294 }
                                    ]
                                },
                                {
                                    name: 'DataUtil',
                                    value: 3322
                                }
                            ]
                        },
                        {
                            name: 'display',
                            children: [
                                { name: 'DirtySprite', value: 8833 },
                                { name: 'LineSprite', value: 1732 },
                                { name: 'RectSprite', value: 3623 }
                            ]
                        },
                        {
                            name: 'flex',
                            children: [{ name: 'FlareVis', value: 4116 }]
                        },
                        {
                            name: 'query',
                            children: [
                                { name: 'AggregateExpression', value: 1616 },
                                { name: 'And', value: 1027 },
                                { name: 'Arithmetic', value: 3891 },
                                { name: 'Average', value: 891 },
                                { name: 'BinaryExpression', value: 2893 },
                                { name: 'Comparison', value: 5103 },
                                { name: 'CompositeExpression', value: 3677 },
                                { name: 'Count', value: 781 },
                                { name: 'DateUtil', value: 4141 },
                                { name: 'Distinct', value: 933 },
                                { name: 'Expression', value: 5130 },
                                { name: 'ExpressionIterator', value: 3617 },
                                { name: 'Fn', value: 3240 },
                                { name: 'If', value: 2732 },
                                { name: 'IsA', value: 2039 },
                                { name: 'Literal', value: 1214 },
                                { name: 'Match', value: 3748 },
                                { name: 'Maximum', value: 843 },
                                {
                                    // name: 'methods',
                                    children: [
                                        { name: 'add', value: 593 },
                                        { name: 'and', value: 330 },
                                        { name: 'average', value: 287 },
                                        { name: 'count', value: 277 },
                                        { name: 'distinct', value: 292 },
                                        { name: 'div', value: 595 },
                                        { name: 'eq', value: 594 },
                                        { name: 'fn', value: 460 },
                                        { name: 'gt', value: 603 },
                                        { name: 'gte', value: 625 },
                                        { name: 'iff', value: 748 },
                                        { name: 'isa', value: 461 },
                                        { name: 'lt', value: 597 },
                                        { name: 'lte', value: 619 },
                                        { name: 'max', value: 283 },
                                        { name: 'min', value: 283 },
                                        { name: 'mod', value: 591 },
                                        { name: 'mul', value: 603 },
                                        { name: 'neq', value: 599 },
                                        { name: 'not', value: 386 },
                                        { name: 'or', value: 323 },
                                        { name: 'orderby', value: 307 },
                                        { name: 'range', value: 772 },
                                        { name: 'select', value: 296 },
                                        { name: 'stddev', value: 363 },
                                        { name: 'sub', value: 600 },
                                        { name: 'sum', value: 280 },
                                        { name: 'update', value: 307 },
                                        { name: 'variance', value: 335 },
                                        { name: 'where', value: 299 },
                                        { name: 'xor', value: 354 },
                                        { name: 'x_x', value: 264 }
                                    ]
                                },
                                { name: 'Minimum', value: 843 },
                                { name: 'Not', value: 1554 },
                                { name: 'Or', value: 970 },
                                { name: 'Query', value: 13896 },
                                { name: 'Range', value: 1594 },
                                { name: 'StringUtil', value: 4130 },
                                { name: 'Sum', value: 791 },
                                { name: 'Variable', value: 1124 },
                                { name: 'Variance', value: 1876 },
                                { name: 'Xor', value: 1101 }
                            ]
                        }
                    ],
                }
            ]
        }
    },
    mounted() {
        this.chartInstance = Charts.init(document.getElementById(this.id));
        this.option.series[0].data = this.dataList;
        this.chartInstance.setOption(this.option);
        const self = this;
        if (this.chartInstance) {
            window.addEventListener("resize", () => {
                // 改变长宽
                self.chartInstance.resize();
            });
        }

    },
    unmounted() {
        if (this.chartInstance) {
            window.removeEventListener('resize', this.chartInstance.resize); //销毁图表监听事件
            this.chartInstance.dispose();
        }
    }
};
</script>

<style scoped></style>