我如何仅在移动或小屏幕上使用汉堡包反应菜单？

Question

我希望在组件中有一个移动菜单，但是，它仅应在移动设备上工作。单击它后，应该会出现诸如Home，Furniture Chair ...之类的选项。我已经安装了汉堡包反应菜单，但是不确定如何执行此操作。我应该使用媒体查询还是纯粹使用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;

Answer 1

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

例如

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