Feature 306 Layout & theme

Responsive Design รองรับทุกหน้าจอ

One layout that adapts from a 320px phone to a wide desktop, using CSS Grid, media queries and container queries.

Live demo

Everything here talks to the real Spring Boot + SQL Server back end.

Device preview

The frame below loads a normal page (/lessons/306/sample). Its CSS reacts to the frame width with media queries.

— px breakpoint

Container query

Drag the bottom-right corner of the dashed box. The card follows the box width, not the window.

Adaptive card

Layout:

This window

0viewport width (px)

-app breakpoint

-pointer type

What to notice

Mobile-first CSS: the base rules are for phones, min-width media queries add columns.
Container queries size each card by its own box, not by the window.
The app shell itself turns the sidebar into a slide-in drawer below 900px.

Try it

Click Phone / Tablet / Desktop and watch the sample page reflow.
Drag the handle on the right edge of the preview to any width.
Make this browser window narrow: the sidebar becomes a drawer with a menu button.

Source code

6 parts, read from the files in this project

src/main/resources/templates/sample.html A mobile-first page: base rules for phones, min-width queries add columns

<style>
  * { box-sizing: border-box; }
  body { margin: 0; font-family: "Segoe UI", system-ui, sans-serif; color: #0f172a; background: #f5f6fb; }
  header { display: flex; align-items: center; justify-content: space-between; padding: .8rem 1rem; background: #fff; border-bottom: 1px solid #e2e6ef; position: sticky; top: 0; }
  header b { font-size: 1rem; }
  nav { display: none; gap: 1.2rem; font-size: .9rem; }
  nav a { color: #475569; text-decoration: none; }
  .burger { width: 2.2rem; height: 2.2rem; border: 1px solid #e2e6ef; border-radius: .5rem; background: #fff; display: grid; place-items: center; font-size: 1.1rem; }
  .hero { padding: 1.5rem 1rem; background: linear-gradient(135deg, #4f46e5, #ec4899); color: #fff; }
  .hero h1 { margin: 0 0 .5rem; font-size: 1.5rem; line-height: 1.2; }
  .hero p { margin: 0; opacity: .9; font-size: .9rem; }
  .grid { display: grid; grid-template-columns: 1fr; gap: .9rem; padding: 1rem; }
  .card { background: #fff; border: 1px solid #e2e6ef; border-radius: .8rem; overflow: hidden; }
  .card img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
  .card div { padding: .7rem .8rem; font-size: .85rem; }
  .card b { display: block; }
  .bp { position: fixed; bottom: .6rem; right: .6rem; background: #0f172a; color: #fff; font: 600 .75rem/1 monospace; padding: .45rem .6rem; border-radius: .4rem; }
  .bp::after { content: "phone: 1 column"; }
  aside { display: none; }
  @media (min-width: 600px) {
    .grid { grid-template-columns: repeat(2, 1fr); }
    .hero h1 { font-size: 2rem; }
    .bp::after { content: ">= 600px tablet: 2 columns"; }
  }
  @media (min-width: 900px) {
    nav { display: flex; } .burger { display: none; }
    .layout { display: grid; grid-template-columns: 14rem 1fr; }
    aside { display: block; padding: 1rem; border-right: 1px solid #e2e6ef; background: #fff; font-size: .85rem; color: #475569; }
    .grid { grid-template-columns: repeat(3, 1fr); }
    .hero { padding: 2.5rem 2rem; }
    .bp::after { content: ">= 900px desktop: sidebar + 3 columns"; }
  }
</style>

src/main/resources/static/css/app.css The shell: a two-column grid on desktop

.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  min-height: 100vh;
  transition: grid-template-columns .25s var(--ease);
}
html.sidebar-collapsed .app { grid-template-columns: var(--rail-w) minmax(0, 1fr); }

src/main/resources/static/css/app.css Below 900px the sidebar becomes an off-canvas drawer

@media (max-width: 900px) {
  .app, html.sidebar-collapsed .app { grid-template-columns: minmax(0, 1fr); }
  .sidebar {
    position: fixed; inset: 0 auto 0 0; width: min(18rem, 85vw); transform: translateX(-100%);
    transition: transform .28s var(--ease); box-shadow: var(--shadow-lg);
  }
  html.drawer-open .sidebar { transform: none; }
  /* the rail makes no sense on a phone: always show names in the drawer */
  html.sidebar-collapsed .sidebar .nav-text, html.sidebar-collapsed .sidebar .nav-no, html.sidebar-collapsed .sidebar .brand-text { display: revert; }
  html.sidebar-collapsed .sidebar .nav-link { justify-content: flex-start; padding: .48rem .65rem; }
  html.sidebar-collapsed .sidebar .nav-title { font-size: .7rem; height: auto; background: none; margin: 0; padding: 0 .65rem .35rem; }
  html.sidebar-collapsed .sidebar .brand { justify-content: flex-start; padding: 0 .9rem; }
  .sidebar-foot { display: none; }
  .scrim { display: block; position: fixed; inset: 0; background: rgb(2 6 23 / .45); z-index: 35; opacity: 0; pointer-events: none; transition: opacity .25s; }
  html.drawer-open .scrim { opacity: 1; pointer-events: auto; }
  .mobile-only { display: inline-grid; }
  .search-btn { min-width: 0; width: 2.4rem; padding: 0; justify-content: center; }
  .search-btn span, .search-btn kbd { display: none; }
  .topbar { padding: 0 .75rem; gap: .4rem; }
  .page { padding: 1.25rem 1rem 2.5rem; }
}
@media (max-width: 480px) { .hide-xs { display: none !important; } h1 { font-size: 1.5rem; } }

src/main/resources/static/css/app.css Mobile first: one column, auto-fill adds more when there is room

.lesson-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16.5rem), 1fr)); gap: 1rem; }

src/main/resources/static/css/app.css Container query: the card changes by its own width

.cq-wrap { container-type: inline-size; resize: horizontal; overflow: auto; border: 1.5px dashed var(--border-strong); border-radius: var(--radius); padding: .75rem; min-width: 14rem; max-width: 100%; width: 100%; }
.cq-card { display: grid; gap: .9rem; grid-template-columns: 1fr; align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: .9rem; }
.cq-card img { border-radius: .6rem; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.cq-card .cq-label::after { content: "narrow (< 28rem): stacked"; }
@container (min-width: 28rem) {
  .cq-card { grid-template-columns: 10rem 1fr; }
  .cq-card .cq-label::after { content: "wide (>= 28rem): side by side"; }
}
@container (min-width: 44rem) {
  .cq-card { grid-template-columns: 16rem 1fr auto; }
  .cq-card .cq-label::after { content: "very wide (>= 44rem): three columns"; }
}

src/main/resources/static/js/demos.js Device buttons and a drag handle change the preview width

demos[306] = () => {
  const frame = $('#deviceFrame'), handle = $('#deviceHandle');
  const bpName = (w) => (w >= 900 ? 'desktop (>= 900)' : w >= 600 ? 'tablet (>= 600)' : 'phone (< 600)');
  function setWidth(w) {
    const max = frame.parentElement.clientWidth - 32;
    w = Math.round(Math.max(320, Math.min(w, max)));
    frame.style.width = w + 'px';
    handle.setAttribute('aria-valuenow', w);
    $('#frameWidth').textContent = w + ' px';
    $('#frameBp').textContent = bpName(w);
    $$('[data-width]').forEach((b) => b.setAttribute('aria-checked', String(Math.abs(Number(b.dataset.width) - w) < 2 || (b.dataset.width === '1100' && w === max && max < 1100))));
  }
  $$('[data-width]').forEach((b) => b.addEventListener('click', () => setWidth(Number(b.dataset.width))));
  handle.addEventListener('pointerdown', (e) => {
    const startX = e.clientX, startW = frame.offsetWidth;
    handle.setPointerCapture(e.pointerId);
    frame.classList.add('dragging');
    const move = (ev) => setWidth(startW + (ev.clientX - startX) * 2); // the frame is centred, so both sides move
    const up = () => { frame.classList.remove('dragging'); handle.removeEventListener('pointermove', move); };
    handle.addEventListener('pointermove', move);
    handle.addEventListener('pointerup', up, { once: true });
  });
  handle.addEventListener('keydown', (e) => {
    if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') { e.preventDefault(); setWidth(frame.offsetWidth + (e.key === 'ArrowRight' ? 20 : -20)); }
  });
  const updateWindow = () => {
    $('#vpWidth').textContent = innerWidth;
    $('#vpBp').textContent = innerWidth <= 480 ? 'xs (<= 480)' : innerWidth <= 900 ? 'tablet (<= 900)' : 'desktop';
    $('#vpPointer').textContent = matchMedia('(pointer: coarse)').matches ? 'touch (coarse)' : 'mouse (fine)';
  };
  addEventListener('resize', updateWindow);
  updateWindow();
  setWidth(375);
};