首先将最大宽度转换为移动设备

Question

我已经下载了一个关于 Gatsby 和样式化组件的优秀教程。本教程采用桌面优先方法。

我正在尝试从桌面优先转换为移动优先，桌面优先版本正在按预期工作，但我转换为移动优先的版本不起作用。

这是 Navbar.jsx 文件；我相信这个文件不需要修改。

import React from 'react';
import styled from 'styled-components';
import Burger from './Burger';

const Nav = styled.nav`
  width: 100%;
  height: 55px;
  border-bottom: 2px solid #f1f1f1;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;

  .logo {
    padding: 15px 0;
  }
`

const Navbar = () => {
  return (
    <Nav>
      <div className="logo">
        Nav Bar
      </div>
      <Burger />
    </Nav>
  )
}

export default Navbar

这是带有桌面优先的原始 Burger.jsx，该文件对桌面隐藏并导入实际的菜单块

import React, { useState } from 'react'
import styled from 'styled-components'
import RightNav from './RightNav'

const StyledBurger = styled.div`
      width: 2rem;
      height: 2rem;
      position: fixed;
      top: 15px;
      right: 20px;
      z-index: 20;
      display: none;
    
      @media (max-width: 768px) {
        display: flex;
        justify-content: space-around;
        flex-flow: column nowrap;
      } 
    
      div {
        width: 2rem;
        height: 0.25rem;
        background-color: ${({ open }) => (open ? '#ccc' : '#333')};
        border-radius: 10px;
        transform-origin: 1px;
        transition: all 0.3s linear;
    
        &:nth-child(1) {
          transform: ${({ open }) => (open ? 'rotate(45deg)' : 'rotate(0)')};
        }
    
        &:nth-child(2) {
          transform: ${({ open }) => (open ? 'translateX(100%)' : 'translateX(0)')};
          opacity: ${({ open }) => (open ? 0 : 1)};
        }
    
        &:nth-child(3) {
          transform: ${({ open }) => (open ? 'rotate(-45deg)' : 'rotate(0)')};
        }
      }
    `
    
    const Burger = () => {
      const [open, setOpen] = useState(false)
    
      return (
        <>
          <StyledBurger open={open} onClick={() => setOpen(!open)}>
            <div />
            <div />
            <div />
          </StyledBurger>
          <RightNav open={open} />
        </>
      )
    }
    
    export default Burger

这是我尝试将其转换为具有最小宽度的移动优先，原始代码在注释块中：

import React, { useState } from 'react'
import styled from 'styled-components'
import RightNav from './RightNav'

const StyledBurger = styled.div`
  /* width: 2rem;
  height: 2rem;
  position: fixed;
  top: 15px;
  right: 20px;
  z-index: 20;
  display: none;

  @media (max-width: 768px) {
    display: flex;
    justify-content: space-around;
    flex-flow: column nowrap;
  } */

  display: flex;
  justify-content: space-around;
  flex-flow: column nowrap;

  @media (min-width: 350px) {
    width: 2rem;
    height: 2rem;
    position: fixed;
    top: 15px;
    right: 20px;
    z-index: 20;
    display: none;
  }

  div {
    width: 2rem;
    height: 0.25rem;
    background-color: ${({ open }) => (open ? '#ccc' : '#333')};
    border-radius: 10px;
    transform-origin: 1px;
    transition: all 0.3s linear;

    &:nth-child(1) {
      transform: ${({ open }) => (open ? 'rotate(45deg)' : 'rotate(0)')};
    }

    &:nth-child(2) {
      transform: ${({ open }) => (open ? 'translateX(100%)' : 'translateX(0)')};
      opacity: ${({ open }) => (open ? 0 : 1)};
    }

    &:nth-child(3) {
      transform: ${({ open }) => (open ? 'rotate(-45deg)' : 'rotate(0)')};
    }
  }
`

const Burger = () => {
  const [open, setOpen] = useState(false)

  return (
    <>
      <StyledBurger open={open} onClick={() => setOpen(!open)}>
        <div />
        <div />
        <div />
      </StyledBurger>
      <RightNav open={open} />
    </>
  )
}

export default Burger

这就是将 RightNav.jsx 文件菜单导入到 Burger.jsx 中

import React from 'react'
import styled from 'styled-components'

const Ul = styled.ul`
  list-style: none;
  display: flex;
  flex-flow: row nowrap;

  li {
    padding: 18px 10px;
  }

  @media (max-width: 768px) {
    flex-flow: column nowrap;
    background-color: #0d2538;
    position: fixed;
    transform: ${({ open }) => (open ? 'translateX(0)' : 'translateX(100%)')};
    top: 0;
    right: 0;
    height: 100vh;
    width: 300px;
    padding-top: 3.5rem;
    transition: transform 0.3s ease-in-out;

    li {
      color: #fff;
    }
  }   

`

const RightNav = ({ open }) => {
  return (
    <Ul open={open}>
      <li>Home</li>
      <li>About Us</li>
      <li>Contact Us</li>
      <li>Sign In</li>
      <li>Sign Up</li>
    </Ul>
  )
}

export default RightNav

这是我在 RightNav.jsx 文件中尝试使其移动优先，原始代码位于注释块中：

import React from 'react'
import styled from 'styled-components'

const Ul = styled.ul`
  /* list-style: none;
  display: flex;
  flex-flow: row nowrap;

  li {
    padding: 18px 10px;
  }

  @media (max-width: 768px) {
    flex-flow: column nowrap;
    background-color: #0d2538;
    position: fixed;
    transform: ${({ open }) => (open ? 'translateX(0)' : 'translateX(100%)')};
    top: 0;
    right: 0;
    height: 100vh;
    width: 300px;
    padding-top: 3.5rem;
    transition: transform 0.3s ease-in-out;

    li {
      color: #fff;
    }
  } */
  
    display:flex;
    list-style: none;
    flex-flow: column nowrap;
    background-color: #0d2538;
    position: fixed;
    transform: ${({ open }) => (open ? 'translateX(0)' : 'translateX(100%)')};
    top: 0;
    right: 0;
    height: 100vh;
    width: 300px;
    padding-top: 3.5rem;
    transition: transform 0.3s ease-in-out;

    li {
      color: #fff;
    }

  @media (min-width: 350px) {
    flex-flow: row nowrap;

  li {
    padding: 18px 10px;
  }
  }  

`

const RightNav = ({ open }) => {
  return (
    <Ul open={open}>
      <li>Home</li>
      <li>About Us</li>
      <li>Contact Us</li>
      <li>Sign In</li>
      <li>Sign Up</li>
    </Ul>
  )
}

export default RightNav

Answer 1

我相信您的问题出在min-width 示例中的媒体查询中：

@media (min-width: 350px) {
    ...
    display: none;
}

在那一行 CSS 之后，您永远不会将其设置为可见显示模式

如果您想在桌面上隐藏它，您需要将min-width 的值增加到768px 或该范围内的某个位置。和现在一样，只有屏幕尺寸小于350px时才会看到菜单@