Design System

Design Guide

MediaQuery

Mobile <= 480px < PC ( iphone5 <= 360px )

SCSS
              
$mobile-width: 480px;
$mobile-s-width: 360px;

/* mobile middle 480px : mobile */
@mixin mobile {
  @media screen and (max-width: #{$mobile-width}) {
    @content;
  }
}

/* mobile small 360px : mobile-sm */
@mixin mobile-s {
  @media screen and (max-width: #{$mobile-s-width}) {
    @content;
  }
}

// export
@include mobile {
  .custom-class {
    margin: 0;
    padding: 0;
  }
}