我想創(chuàng)建布局，但不要分割成桌面和移動(dòng)文件，目前我有移動(dòng)視圖，但我想不出什么屬性用于桌面。如果你想查詢，mediumTablet的最大寬度是768像素。Navbar已經(jīng)響應(yīng)我的問(wèn)題是元素在。

以下是我使用的代碼:

import styled from 'styled-components'

import { queries } from 'styles'

import { Navbar } from 'components/common'

import { avatar } from '@utils'

export const Profile = () => (
   <>
      <Navbar />
      <ProfileContainer>
         <TopContainer>
            <AvatarContainer>
               <Avatar src={avatar('Kluzko')} alt="user avatar picture" />
            </AvatarContainer>
            <UserDetailsContainer>
               <FullName>Kluzko</FullName>
               <MobileRowContainer>
                  <PositionText>
                     <span>Front-end</span> developer
                  </PositionText>
                  <Location>Poland</Location>
               </MobileRowContainer>
            </UserDetailsContainer>
         </TopContainer>
         <ButtonContainer>
            <MessageButton>Message</MessageButton>
            <InviteButton>Invite to project</InviteButton>
         </ButtonContainer>
      </ProfileContainer>
   </>
)

const ProfileContainer = styled.div`
   min-height: ${({ theme }) => theme.variables.height};
   display: flex;
   flex-direction: column;
   color: #ffffff;
   padding: 0px 30px;
`

const TopContainer = styled.div`
   width: 100%;
   display: flex;
   justify-content: space-between;
   align-items: flex-start;

   @media ${queries.mediumTablet} {
      flex-direction: column;
      align-items: center;
      justify-content: center;
   }
`

const AvatarContainer = styled.div`
   margin-right: 15px;
`

const UserDetailsContainer = styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;

   @media ${queries.mediumTablet} {
      margin-top: 15px;
   }
`

const Avatar = styled.img`
   width: 65px;
   height: 65px;
   border-radius: 50%;
   background-color: lightblue;
   @media ${queries.mediumTablet} {
      width: 90px;
      height: 90px;
   }
`
const MobileRowContainer = styled.div`
   display: flex;
   align-items: center;
`
const FullName = styled.h1``

const PositionText = styled.h2`
   padding-bottom: 10px;

   span {
      color: #6366f1;
   }
   @media ${queries.mediumTablet} {
      font-size: 16px;
      padding-top: 10px;
      font-weight: normal;
      span {
         font-weight: bold;
      }
   }
`

const Location = styled.p`
   @media ${queries.mediumTablet} {
      font-size: 16px;
      &::before {
         content: 'from ';
         padding-left: 4px;
      }
   }
`

const ButtonContainer = styled.div`
   display: flex;
   gap: 15px;
   align-items: center;
   padding-top: 15px;

   @media ${queries.mediumTablet} {
      padding-top: 25px;
      justify-content: center;
   }
`

const MessageButton = styled.button`
   color: #111827;
   background-color: #ffffff;
   font-weight: 600;
   padding: 10px 25px;
   border-radius: 5px;
`

const InviteButton = styled.button`
   color: #ffffff;
   background-color: #6366f1;
   font-weight: 600;
   padding: 10px 25px;
   border-radius: 5px;
`

移動(dòng)視圖

桌面視圖