前端问题总结（一）

1、页面缩放问题

问题描述

在写前端页面的时候，如果不进行设置，可能会出现页面窗口缩小或页面放大后变形的问题（使用响应式框架布局后就可以解决但这里不使用 ）。如图：

问题解决

Vue中可以使用监控页面宽度，页面宽度小于一定值后可以固定宽度

<template>
    <div id="app" ref="app">
        <el-container>
            <el-header>
                <Navigation/>
            </el-header>
            <el-main>
                <router-view/>
            </el-main>
            <el-footer style="text-align: center;font-size: 20px;line-height: 2;color: #8590a6;">
                慕乎 © 2020 慕随心 学习制作
            </el-footer>
        </el-container>
    </div>
</template>
<script>
    import Navigation from "@/components/header/Navigation";
    export default {
        components: {Navigation},
        data() {
            return {
                screenWidth: document.body.clientWidth
            }
        },
        mounted() {
            window.onresize = () => {
                this.screenWidth = document.body.clientWidth
            }
        },
        watch: {
            screenWidth(val) {
                if (val < 1200) {
                    this.$refs.app.style.width = 1200 + 'px'
                } else {
                    this.$refs.app.style.width = ''
                }
            }
        }
    }
</script>