侧边导航在 100% 和 80% 缩放级别下显示不同

Question

我已经实现了切换侧导航。问题在于，当屏幕最初设置为 100% 时，导航菜单占据了屏幕的整个高度。然而，当缩小到 80% 时，它看起来很完美。

100% :

75%：

那么，我该如何制作 CSS，以查看 80% 视口 UI？ 或者我如何更改 CSS 以获得 80% 的缩放视图？

<div className={`layout-side-nav ${isSidenavToggled ? "" : "side-nav-closed"}`}>
            <div className="main-layout-sidenav">
                <div className="sidenav-header">
                    <div className="sidenav-header-item">
                        <div className="biodata-logo">
                            <img src={BiodataLogo} className="biodata-logo-img" alt="Biodata Groups Logo" />
                        </div>
                        <div className={`user-icon ${isSidenavToggled ? "" : "user-icon-hidden"}`}>
                            {userProfileImage ? (
                                <img src={userProfileImage} className="user-icon-img" />
                            ) : (
                                <img src={DefaultUserIcon} className="user-icon-img" />
                            )}
                            {userNotificationCount > 0 ? <span className="user-notification-badge"></span> : null}
                        </div>
                        <div className="toggle-btn">
                            <NavToggleButton onClick={toggleSideNav} isToggledLeft={isSidenavToggled} />
                        </div>
                    </div>
                </div>

                <div className={`sidenav-menu ${isSidenavToggled ? "" : "sidenav-menu-hidden"}`}>
                    <NavLink to={"monitoring"} className="navlink-menu">
                        <div className="sidenav-menu-item">
                            <img src={MonitorIcon} className="nav-menu-icon" alt="" />
                            <div className="navmenu-title">{"Menu1"}</div>
                        </div>
                    </NavLink>

                    <NavLink to={"goals"} className="navlink-menu">
                        <div className="sidenav-menu-item">
                            <img src={GoalsIcon} className="nav-menu-icon" alt="" />
                            <div className="navmenu-title">{"Menu2"}</div>
                        </div>
                    </NavLink>

                    <NavLink to={"biomarkers"} className="navlink-menu">
                        <div className="sidenav-menu-item">
                            <img src={BioMarkers} className="nav-menu-icon" alt="" />
                            <div className="navmenu-title">{"Menu3"}</div>
                        </div>
                    </NavLink>

                    <NavLink to={"recommendations"} className="navlink-menu">
                        <div className="sidenav-menu-item">
                            <img src={RecomendationsIcon} className="nav-menu-icon" alt="" />
                            <div className="navmenu-title">{"Menu4"}</div>
                        </div>
                    </NavLink>

                    <NavLink to={"records"} className="navlink-menu">
                        <div className="sidenav-menu-item">
                            <img src={RecordsIcon} className="nav-menu-icon" alt="" />
                            <div className="navmenu-title">{"Menu5"}</div>
                        </div>
                    </NavLink>

                    <NavLink to={"nutrition"} className="navlink-menu">
                        <div className="sidenav-menu-item">
                            <img src={NutritionIcon} className="nav-menu-icon" alt="" />
                            <div className="navmenu-title">{"Menu6"}</div>
                        </div>
                    </NavLink>

                    <NavLink to={"genetics"} className="navlink-menu">
                        <div className="sidenav-menu-item">
                            <img src={GeneticsIcon} className="nav-menu-icon" alt="" />
                            <div className="navmenu-title">{"Menu7"}</div>
                        </div>
                    </NavLink>

                    <NavLink to={"organs"} className="navlink-menu">
                        <div className="sidenav-menu-item">
                            <img src={OrgansIcon} className="nav-menu-icon" alt="" />
                            <div className="navmenu-title">{"Menu8"}</div>
                        </div>
                    </NavLink>

                    <NavLink to={"files"} className="navlink-menu">
                        <div className="sidenav-menu-item">
                            <img src={FilesIcon} className="nav-menu-icon" alt="" />
                            <div className="navmenu-title">{"Menu9"}</div>
                        </div>
                    </NavLink>

                    <NavLink to={"infographics"} className="navlink-menu">
                        <div className="sidenav-menu-item">
                            <img src={InfographicsIcon} className="nav-menu-icon" alt="" />
                            <div className="navmenu-title">{"Menu10"}</div>
                        </div>
                    </NavLink>

                    <NavLink to={"faq"} className="navlink-menu">
                        <div className="sidenav-menu-item">
                            <img src={FaqIcons} className="nav-menu-icon" alt="" />
                            <div className="navmenu-title">{"Menu11"}</div>
                        </div>
                    </NavLink>
                </div>

下面是SCSS代码

.index-main-layout {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100%;
    .layout-side-nav {
        transition: all 0.5s ease;
        width: 200px;
        min-width: 272px;
        background-color: #1d3666;
        overflow: auto;
    }
    .layout-side-nav::-webkit-scrollbar {
        display: none;
    }
    .side-nav-closed {
        width: 100px;
        min-width: 50px;
    }
}

.main-layout-sidenav {
    position: relative;
    .sidenav-header {
        padding: 1rem;
        .sidenav-header-item {
            display: flex;
            align-items: center;
            gap: 1rem;
            .biodata-logo {
                .biodata-logo-img {
                    width: 40px;
                    border-radius: 50%;
                    max-width: 40px;
                    min-width: 40px;
                }
            }

            .user-icon {
                width: 40px;
                height: 40px;
                display: flex;
                align-items: center;
                justify-content: center;
                position: relative;
                .user-icon-img {
                    width: 40px;
                    max-width: 40px;
                    min-width: 40px;
                    border-radius: 10px;
                }
                .user-notification-badge {
                    position: absolute;
                    top: 0;
                    right: -3px;
                    height: 10px;
                    width: 10px;
                    border-radius: 50%;
                    background-color: #e35953;
                    border: 2px solid white;
                }
            }
            .user-icon-hidden {
                display: none;
            }

            .toggle-btn {
                margin-left: auto;
                .nav-toggle-btn {
                    display: flex;
                    flex-wrap: nowrap;
                    .nav-toggle-btn-img {
                        width: 8px;
                    }
                    &:hover {
                        cursor: pointer;
                    }
                }
                .toggled-nav {
                    transform: rotate(180deg);
                }
            }
        }
    }

    .sidenav-menu {
        width: 100%;
        display: flex;
        flex-direction: column;
        padding: 0rem 0rem 1rem 0rem;
        .navlink-menu {
            padding: 0.6rem;
            padding-left: 1.5rem;
            .sidenav-menu-item {
                width: 100%;
                text-wrap: nowrap;
                display: flex;
                align-items: center;
                gap: 1rem;
                text-decoration: none;
                color: white;
                .nav-menu-icon {
                    width: 25px;
                    height: 25px;
                }
            }
            &:hover {
                cursor: pointer;
                color: #edeef8 !important;
                border: none !important;
                background-color: rgba(255, 255, 255, 0.2);
            }
        }
        .active {
            cursor: pointer;
            color: #edeef8 !important;
            border: none !important;
            background-color: rgba(255, 255, 255, 0.2);
        }
    }
    .sidenav-menu-hidden {
        .navlink-menu {
            .navmenu-title {
                display: none;
            }
            text-decoration: none !important;
        }
    }

    .sidenav-add-data-btn {
        position: absolute;
        padding: 1rem;
        bottom: -0.5%;
        width: 100%;
    }

    .sidenav-add-data-btn {
        button {
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #2559d6;
            color: #ffffff;
            gap: 1rem;
            font-weight: 500;
            width: 100%;
            text-wrap: nowrap;
            .add-icon {
                display: flex;
                align-items: center;
                justify-content: center;
            }
            &:hover {
                opacity: 0.8;
                background-color: #2559d6;
            }
        }
    }
}
.layout-outlet-nav {
    width: 100%;
    height: 100%;
}

Answer 1

你必须使用

transform:scale() property

。在 80% 缩放时，如果导航看起来很完美，则缩小 .layout-side-nav 类内的所有元素并添加它

transform: scale(0.8)

。这样，元素的大小减少到 80%，因此当浏览器缩小时它们看起来很完美。还可以通过

transform-origin property

调整缩放元素的位置。

.layout-side-nav {
    transform: scale(0.8);
    transform-origin: top left; // Adjust as needed
    // ... rest of your styles
}