如果我縮小視窗而不是在移動設備上，為什么我的斷點有效？

我創建了一個在線商店并使用媒體查詢斷點根據螢屏寬度調整內容。如果我通過更改瀏覽器的大小來更改螢屏大小，則一切正常。在設定的斷點處，我的導航欄崩潰了，一切看起來都很棒。但是一旦我切換到移動視圖，事情就會變得很奇怪。不管我把視窗做得多小，導航欄都會保持原樣。我聽說 Chrome Dev 工具不可靠，可能會導致回應問題，所以我用 iPhone 12 連接到我的網站，結果保持不變，沒有任何回應。

從瀏覽器查看時，您可以在此處看到導航欄

這是導航欄在它倒塌后應該如何處理

這是導航欄在 Chrome 開發工具和我的 iPhone 12 上的外觀

這是我的導航欄 jsx

return (
    <>  
        <nav className={classes.navbar}>
            <Link to='/' className={classes.navbarLogo} > 
            FIRM
            </Link>
            <div className={classes.menuIcon} onClick={handleClick}>
                {click ? 
                <i><FontAwesomeIcon icon={faTimes} className={classes.fat}/></i> 
                : 
                <i><FontAwesomeIcon icon={faBars} className={classes.fat}/></i>}
            </div>
            <ul className={click ? classes.navMenuActive : classes.navMenu}>
                <li className={classes.navItem}>
                    <Link to='/' className={classes.navbarLinks} onClick={closeMobileMenu}>
                        Home
                    </Link>
                </li>
                <li className={classes.navItem}
                    onMouseEnter={onMouseEnter}
                    onMouseLeave={onMouseLeave}
                >
                    <Link to='/Produkte' className={classes.navbarLinks} onClick={closeMobileMenu}>
                        Produkte <i className='fas fa-caret-down'/>
                    </Link>
                    {dropdown && <Dropdown />}
                </li>
                <li className={classes.navItem}>
                    <Link to='/Kontakt' className={classes.navbarLinks} onClick={closeMobileMenu}>
                        Kontaktiere uns
                    </Link>
                </li>
                <li className={classes.navItem}>
                    <Link to='/Warenkorb' className={classes.navbarLinksMobile} onClick={closeMobileMenu}>
                        <ShoppingCartIcon totalitems={totalitems}></ShoppingCartIcon>
                    </Link>
                </li>
            </ul>
            <NavButton className={classes.buttonFlex} totalitems={totalitems}/>
        </nav>
        <div className={classes.navBlock}></div>
    </>
    
)   

}

這些是我的風格

export default makeStyles((theme) => ({
    navbar: {
        background: 'linear-gradient(90deg, rgb(28, 27, 27) 0%, rgb(26, 23, 23) 100%)',
        height: '80px',
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        fontSize: '1.2rem',
        width: "100%",
        position: "fixed"
    },
    navbarLogo: {
        color: '#fff',
        justifySelf: 'start',
        marginLeft: '20px',
        cursor: 'pointer',
        textDecoration: 'none',
        fontSize: '2rem',
        fontFamily: 'PT Sans, sans-serif'
    },
    navMenu: {
        display: 'grid',
        gridTemplateColumns: 'repeat(5, auto)',
        gridGap: '10px',
        listStyle: 'none',
        textAlign: 'center',
        width: '70vw',
        justifyContent: 'end',
        marginRight: '2rem'
    },
    navItem: {
        display: 'flex',
        alignItems: 'center',
        height: '80px',
    },
    navbarLinks: {
        color: 'white',
        textDecoration: 'none',
        padding: '0.5rem 1rem',
        fontFamily: 'PT Sans, sans-serif',
        '&:hover': {
            backgroundColor: '#1888ff',
            borderRadius: '4px',
            transition: 'all 0.2s ease-out'
        }
    },
    fat: {
        color: 'white'
    },
    navbarLinksMobile: {
        display: 'none'
    },
    menuIcon: {
        display: 'none',
    },
    navBlock : {
        height: "80px"
    },
    ['@media screen and (max-width: 960px)']: {
        NavbarItems: {
            position: 'relative'
        },
        navMenu: {
            display: 'flex',
            flexDirection: 'column',
            width: '100%',
            height: '90vh',
            position: 'absolute',
            top: '80px',
            left: '-120%',
            opacity: '1',
            transition: 'all 0.5s ease',
            zIndex: '1',
        },
        navMenuActive: {
            paddingLeft: '0',
            marginTop: '0',
            display: 'flex',
            flexDirection: 'column',
            width: '100%',
            height: '90vh',
            position: 'absolute',
            top: '80px',
            transition: 'all 0.5s ease',
            zIndex: '1',
            background: '#242222',
            left: '0',
            opacity: '1',
        },
        navbarLinks: {
            textAlign: 'center',
            padding: '2rem',
            width: '100%',
            display: 'table',
            '&:hover': {
                backgroundColor: '#1888ff',
                borderRadius: '0'
            }
        },
        navbarLogo: {
            position: 'absolute',
            top: '0',
            left: '0',
            transform: 'translate(25%, 50%)'
        },
        menuIcon: {
            display: 'block',
            position: 'absolute',
            top: '0',
            right: '0',
            transform: 'translate(-100%, 60%)',
            fontSize: '1.8rem',
            cursor: 'pointer'

        },
        '.fa-times': {
            color: '#fff',
            fontSize: '2rem'
        },
        navbarLinksMobile: {
            display: 'block',
            textAlign: 'center',
            padding: '1.5rem',
            margin: '2rem auto',
            borderRadius: '4px',
            width: '80%',
            background: '#1888ff',
            textDecoration: 'none',
            color: '#fff',
            fontSize: '1.5rem',
            '&:hover': {
                backgroundColor: '#fff',
                color: '#1888ff',
                transition: '250ms',
            }
        },
        buttonFlex: {
            display: 'none'
        }
    }

}));

uj5u.com熱心網友回復：

我你還沒有這樣做，請嘗試添加到以下行

<meta name="viewport" content="width=device-width, initial-scale=1">

標籤：javascript html css reactjs

上一篇：我如何將fadeOut或fadeIn影片添加到我的JS函式中

下一篇：使用CSS根本不顯示工具提示圖示