Responsive Design

Just as a castle adapts its defense to different attacks, so the UI must adapt to different devices.

Media Queries

1// mixins.scss
2@mixin mobile {
3  @media (max-width: 599px) { @content; }
4}
5
6@mixin tablet {
7  @media (min-width: 600px) and (max-width: 959px) { @content; }
8}
9
10@mixin desktop {
11  @media (min-width: 960px) { @content; }
12}
13
14// Usage
15.samurai-grid {
16  display: grid;
17  gap: 1rem;
18
19  @include mobile {
20    grid-template-columns: 1fr;
21  }
22
23  @include tablet {
24    grid-template-columns: repeat(2, 1fr);
25  }
26
27  @include desktop {
28    grid-template-columns: repeat(4, 1fr);
29  }
30}

CDK BreakpointObserver

1import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
2
3@Component({
4  template: \`
5    @if (isMobile()) {
6      <app-mobile-nav />
7    } @else {
8      <app-desktop-nav />
9    }
10
11    <div [class]="layoutClass()">
12      <ng-content />
13    </div>
14  \`
15})
16export class ResponsiveLayoutComponent {
17  private breakpointObserver = inject(BreakpointObserver);
18
19  isMobile = toSignal(
20    this.breakpointObserver.observe([Breakpoints.Handset]).pipe(
21      map(result => result.matches)
22    ),
23    { initialValue: false }
24  );
25
26  layoutClass = computed(() => this.isMobile() ? 'mobile-layout' : 'desktop-layout');
27}

Flexbox Layouts

1@Component({
2  template: \`
3    <div class="flex-container">
4      <aside class="sidebar">Menu</aside>
5      <main class="content">
6        <ng-content />
7      </main>
8    </div>
9  \`,
10  styles: [\`
11    .flex-container {
12      display: flex;
13      flex-wrap: wrap;
14      min-height: 100vh;
15    }
16
17    .sidebar {
18      flex: 0 0 250px;
19    }
20
21    .content {
22      flex: 1;
23      min-width: 0;  /* Important for overflow */
24    }
25
26    @media (max-width: 768px) {
27      .sidebar {
28        flex: 0 0 100%;
29        order: 2;
30      }
31      .content {
32        order: 1;
33      }
34    }
35  \`]
36})
37export class LayoutComponent {}

Container Queries (CSS)

1// Modern approach
2.card-container {
3  container-type: inline-size;
4  container-name: card;
5}
6
7.card {
8  @container card (min-width: 400px) {
9    display: grid;
10    grid-template-columns: 1fr 2fr;
11  }
12
13  @container card (max-width: 399px) {
14    display: block;
15  }
16}