媒体查询

shuishen

2022-12-01 0f6b31c2d059afad43b3797732d00a5ce4f55809

媒体查询

 src/styles/index.scss

@@ -3,3 +3,4 @@
@import "./icon/index.scss";
@import "./tool/index.scss";
@import "./element-ui/element-ui.scss";
@import "./media/index.scss";

 src/styles/media/index.scss

New file
@@ -0,0 +1,91 @@
@media screen and (min-width: 1920px) {

    html,
    body {
        font-size: 1.44vh;

        #app {
            width: 100vw;
            height: 100vh;

            .wrapper {
                width: 100vw;
                height: 100vh;

                .main-header {
                    width: 100vw;
                    height: countSizeVh(60, 1080);
                }

                .main-content {

                    .left-container,
                    .right-container {
                        top: countSizeVh(60, 1080);
                        width: countSizeVw(400, 1920);
                        height: calc(100% - countSizeVh(60, 1080));

                        .person-box,
                        .case-box,
                        .land-box,
                        .crowd-box {
                            height: countSizeVh(320, 1080);
                        }
                    }

                    .bottom-container {
                        left: countSizeVw(400, 1920);
                        width: calc(100% - countSizeVw(400, 1920) * 2);
                        height: countSizeVh(320, 1080);
                    }
                }
            }
        }
    }

}

@media screen and (min-width: 7296px) {

    html,
    body {
        #app {
            width: 100vw;
            height: 100vh;

            .wrapper {
                width: 100vw;
                height: 100vh;

                .main-header {
                    width: 100vw;
                    height: countSizeVh(135, 2432);
                }

                .main-content {

                    .left-container,
                    .right-container {
                        top: countSizeVh(135, 2432);
                        width: countSizeVw(1520, 7296);
                        height: calc(100% - countSizeVh(135, 2432));

                        .person-box,
                        .case-box,
                        .land-box,
                        .crowd-box {
                            height: countSizeVh(720, 2432);
                        }
                    }

                    .bottom-container {
                        left: countSizeVw(1520, 7296);
                        width: calc(100% - countSizeVw(1520, 7296) * 2);
                        height: countSizeVh(720, 2432);
                    }
                }
            }
        }
    }

}

 src/styles/scssFile.scss

@@ -24,6 +24,13 @@

$table-body-tr-2n-color: rgba(8, 56, 185, 0.8);

@function countSize($size, $vw) {
    @return $size / $vw * 100vh

@function countSizeVw($size, $vw) {
    @return $size / $vw * 100vw
}

;

@function countSizeVh($size, $vh) {
    @return $size / $vh * 100vh
}