Responsive web design breakpoint 변경하기

[donghakang]

요구 사항

• RWD 에서 breakpoint 를 변경하기

기존방식

export const screen = {
  /* Extra small devices (phones, 600px and down) */
  xs: '@media only screen and (max-width: 600px)',

  /* Small devices (portrait tablets and large phones, 600px and up) */
  s: '@media only screen and (min-width: 600px)',

  /* Medium devices (landscape tablets, 768px and up) */
  m: '@media only screen and (min-width: 768px)',

  /* Large devices (laptops/desktops, 992px and up) */
  l: '@media only screen and (min-width: 992px)',

  /* Extra large devices (large laptops and desktops, 1200px and up) */
  xl: '@media only screen and (min-width: 1200px)',

  /** All Devices  */
  phone: '@media only screen and (max-width: 768px)',
  monitor: '@media only screen and (min-width: 768px)'
};

변경방법

phone: 360px ~ 767px
tablet: 768px ~ 1439px
desktop: 1440px ~