[ React ] 반응형

 

반응형 

 

 

1. styled폴더  - media.js

const sizes = {
    mobile: '480px',
    tablet: '768px',
    desktop: '1024px',
};

export const media = {
    mobile: `(max-width: ${sizes.mobile})`,
    tablet: `(max-width: ${sizes.tablet})`,
    desktop: `(max-width: ${sizes.desktop})`,
};

 

 

desktop: 2560px
laptopL: 1440px
laptop: 1024px
tablet: 768px
mobileL: 425px
mobileM: 375px
mobileS: 320px

 

 

 

2. 

import styled from 'styled-components';
import { media } from '경로/media';

const 스타일컴포넌트 = styled.태그`
  padding: 20px;

  @media ${media.tablet} {
    padding: 15px;
  }

  @media ${media.mobile} {
    padding: 10px;
  }
`;

 

 

3.

import styled from 'styled-components';
import { media } from '../styled/media';

export const HeaderWrap = styled.header`
    border-bottom: 1px solid #dcdcdc;
    .inner {
        height: 120px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    h1 {
        width: 30%;
    }
    .all-menu {
        position: absolute;
        right: 0px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 30px;
        display: none;
    }
    
    
    @media ${media.tablet} {
        .inner {
            width: 95%;
        }
        h1 {
            width: 100%;
        }
        .all-menu {
            display: block;
        }
    }
`;