我正在开发一个需要在移动 View 上折叠标题的应用程序,我尝试了不同的样式,但都没有达到预期的效果。这是 desktop view
然后这就是mobile view我需要作出回应。 我的 UI 是基于 antd 构建的
.jsx
<Header className={MAIN_NAV}>
<Menu className={LEFT_NAV_MENU}>
<Item>
item 1
</Item>
<Item>
Item 2
</Item>
</Menu>
<Menu className={RIGHT_NAV_MENU}>
<Item>
item 3
</Item>
<Item>
Item 4
</Item>
</Menu>
</Header>
.css
.main-nav {
position: fixed;
width: 100%;
z-index: 1;
}
.left-nav-menu {
position: relative;
float: left;
top: 50%;
transform: translateY(-50%);
}
.right-nav-menu {
position: relative;
float: right;
top: 50%;
transform: translateY(-50%);
}
最佳答案
您需要阅读媒体查询。
@media only screen and (max-width: 600px) {
/* rules go here */
.MAIN_NAV {
width: 100px;
}
}
关于html - 如何使我的 React 应用程序标题响应?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56979134/