Responsive

Responsive design utilities

Breakpoints

Podo UI provides 3 breakpoints: PC, Tablet, Mobile. You can easily configure layouts optimized for each device.

PC

1280px and above

@include pc

Tablet

768px ~ 1279px

@include tb

Mobile

767px and below

@include mo

SCSS Media Query Mixins

You can use media query mixins in SCSS to apply responsive styles:

component.module.scss

@use 'podo-ui/mixin' as *;

.container {
  padding: s(8);
  font-size: 18px;

  // Tablet (768px ~ 1279px)
  @include tb {
    padding: s(6);
    font-size: 16px;
  }

  // Mobile (767px 이하)
  @include mo {
    padding: s(4);
    font-size: 14px;
  }

  // PC (1280px 이상)
  @include pc {
    max-width: 1200px;
    margin: 0 auto;
  }
}

Responsive Hiding

We provide classes to hide elements on specific devices:

HTML

<!-- Always hidden -->
<div class="hide">Always hidden</div>

<!-- Hidden on PC only -->
<div class="hide-pc">Hidden on PC only</div>

<!-- Hidden on Tablet only -->
<div class="hide-tb">Hidden on Tablet only</div>

<!-- Hidden on Mobile only -->
<div class="hide-mo">Hidden on Mobile only</div>

Live Example (try resizing your window):

Hidden on PC

Hidden on Tablet

Hidden on Mobile

Responsive Grid Example

The grid system automatically works responsively:

HTML

<!-- Auto-adjusts to PC: 12 columns, Tablet: 6 columns, Mobile: 4 columns -->
<section class="grid">
  <div class="w-3">25%</div>
  <div class="w-3">25%</div>
  <div class="w-3">25%</div>
  <div class="w-3">25%</div>
</section>

Live Example:

w-3 (25%)

Responsive Typography

All typography styles automatically scale down on mobile:

예시

// display1
PC: 60px → Mobile: 36px

// display4
PC: 42px → Mobile: 24px

// h1
PC: 54px → Mobile: 24px

// p3
PC: 16px → Mobile: 14px

Live Example:

H1 Heading (PC: 54px, Mobile: 24px)

P3 Body Text (PC: 16px, Mobile: 14px)

Mobile Minimum Width

The minimum width for mobile devices is set to 375px.

device.scss

$min-mo: 375px;  // 최소 모바일 너비

Practical Responsive Example

Responsive layout examples used in real projects:

component.module.scss

@use 'podo-ui/mixin' as *;

.header {
  padding: s(6);
  display: flex;
  justify-content: space-between;
  align-items: center;

  @include tb {
    padding: s(5);
  }

  @include mo {
    padding: s(4);
    flex-direction: column;
    gap: s(3);
  }
}

.nav {
  display: flex;
  gap: s(5);

  @include mo {
    flex-direction: column;
    gap: s(3);
    width: 100%;
  }
}

.card {
  padding: s(6);
  border-radius: r(4);

  @include tb {
    padding: s(5);
  }

  @include mo {
    padding: s(4);
    border-radius: r(3);
  }
}

.sidebar {
  width: 300px;

  @include tb {
    width: 250px;
  }

  @include mo {
    width: 100%;
  }
}

Tip: Use your browser's responsive mode to test layouts on various devices. Chrome: Ctrl/Cmd + Shift + M

Current Screen Size

Current: PC

1280px and above

Current: Tablet

768px ~ 1279px

Current: Mobile

767px and below