如何仅在移动设备或小屏幕上使用 hamburger-react-menu？答案

【问题标题】：How do I use hamburger-react-menu just on mobile or small screen?如何仅在移动设备或小屏幕上使用 hamburger-react-menu？
【发布时间】：2020-04-26 19:47:31
【问题描述】：

我想在我的组件中有一个移动菜单，但是，它应该只适用于移动设备。单击它后，应出现 Home、Furniture Chair... 等选项。我已经安装了 hamburger-react-menu，但不知道该怎么做。我应该使用媒体查询还是纯粹的 react.js？组件代码如下。任何提示将不胜感激。

import React from 'react';
import PropTypes from 'prop-types';

import ProductSearch from '../../features/ProductSearch/ProductSearchContainer';

import styles from './MenuBar.module.scss';

const MenuBar = ({ children }) => (
  <div className={styles.root}>
    <div className='container'>
      <div className='row align-items-center'>
        <div className='col'>
          <ProductSearch />
        </div>
        <div className={'col-auto ' + styles.menu}>
          <ul>
            <li>
              <a href='#' className={styles.active}>
                Home
              </a>
            </li>
            <li>
              <a href='#'>Furniture</a>
            </li>
            <li>
              <a href='#'>Chair</a>
            </li>
            <li>
              <a href='#'>Table</a>
            </li>
            <li>
              <a href='#'>Sofa</a>
            </li>
            <li>
              <a href='#'>Bedroom</a>
            </li>
            <li>
              <a href='#'>Blog</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
);

MenuBar.propTypes = {
  children: PropTypes.node,
};

export default MenuBar;

【问题讨论】：

在 react 中，您可以像使用普通的 html 和 css 页面一样键入媒体查询。这不是一个问题。你可以在 React-Bootstrap 中使用它，这是一个现成的结构。
你可以像这里一样做：stackoverflow.com/questions/61320137/…
谢谢！我可以将其用作单独的组件吗？

标签： javascript css reactjs hamburger-menu

【解决方案1】：

使用引导程序可以减轻您的痛苦，但正如 CanUver 所提到的，如果 oyu 只想为特定视口显示特定元素，那么您正在寻找 css 中的媒体查询。您只需指定，因为您想以不同方式显示菜单：

例如


@media only screen and (max-width: 490px) {
  h1 { color: "pink"; }
}

【讨论】：