[英]Why do my breakpoints work if I scale down the window but not on mobile?
I created an online shop and used Media query breakpoints to adjust the content based on the screen width.我创建了一个在线商店并使用媒体查询断点根据屏幕宽度调整内容。 Everything works fine if I change the screen size by changing the size of the browser.如果我通过更改浏览器的大小来更改屏幕大小,则一切正常。 At the set breakpoint, my navbar collapses and everything looks great.在设置的断点处,我的导航栏崩溃了,一切看起来都很棒。 But as soon as I switch to Mobile view things get weird.但是一旦我切换到移动视图,事情就会变得很奇怪。 Somehow no matter how small I make the window, the navbar remains as it is.不管我把窗口做得多小,导航栏都会保持原样。 I have heard that the Chrome Dev tools are unreliable and can cause issues with responsiveness so I connected to my website with my iPhone 12 and the result stays the same, no responsiveness whatsoever.我听说 Chrome Dev 工具不可靠,可能会导致响应问题,所以我用 iPhone 12 连接到我的网站,结果保持不变,没有任何响应。
Here you can see the Navbar when viewed from the browser从浏览器查看时,您可以在此处看到导航栏
This is the navbar how it's supposed to look after it colapses这是导航栏在它倒塌后应该如何处理
This is how the navbar looks in Chrome dev tools as well as on my iPhone 12这是导航栏在 Chrome 开发工具和我的 iPhone 12 上的外观
This is my Navbar jsx这是我的导航栏 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>
</>
)
} }
These are my styles这些是我的风格
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'
}
}
}));
我你还没有这样做,请尝试添加到以下行
<meta name="viewport" content="width=device-width, initial-scale=1">
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.