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

Posted

技术标签:

【中文标题】首先将最大宽度转换为移动设备【英文标题】：Convert max-width to mobile first 【发布时间】：2020-11-26 16:47:03 【问题描述】：

我已经下载了一个关于 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

【问题讨论】：

【参考方案1】：

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

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

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

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

【讨论】：

如果是 Burger.jsx，是的，桌面的 min-width 设置为 display:none，但默认设置为 display: flex for mobile。或者我是否也需要将其设置为 display:block 或 display:flex ？现在，使用我更改的代码，菜单在桌面和移动设备上都完全不可见。 问题是您将默认设置为display: flex;，然后当设备至少为 350 像素宽时立即将其更改为display: none。如果屏幕小于350px，你会看到是display: flex; 谢谢，我更改了 min-width_460px，所以至少 Burger.jsx 在移动设备上是可切换的，并且 RightNav.jsx 中用于 ul 和 li 的移动设置启动，并且 flex-流：列 nowrap；设置正确，但在 460px 以上根本不可见。但是在属性检查器中，当屏幕宽于 460 像素时，我确实看到它显示 flex-flow: row nowrap 但它仍然不可见？？ flex-flow的值将保持不变，无论元素当前具有何种显示模式并且不会影响它。因此，如果将其设置为display: block或display: none等。 , flex-flow 将保持不变。检查display 属性以查看它是否在正确的屏幕宽度处发生变化。这是重要的看这里。 是的，它确实在 min-with:460px 的设置断点处从 flex-flow: column nowrap 变为 flex-flow: row nowrap

以上是关于首先将最大宽度转换为移动设备的主要内容，如果未能解决你的问题，请参考以下文章

Chrome、Firefox 等是不是为移动设备指定最大设备宽度？

移动设备的 Twitter 引导程序和最大宽度？

我想在移动设备上将 zuck.js 故事项目的宽度设置为最大 320px

使用 FFMPEG 将 mp4 转换为最大支持移动设备的 MP4 [关闭]

由于视图宽度，移动设备会拉伸屏幕的 div

创建正确的媒体查询断点以覆盖移动设备和平板电脑