Mastering Precise Responsive Layouts with vh, vw, and Media Queries

Overview

The visual effect is achieved by placing common elements such as the header, footer, navigation bar and borders on the top layer with a high z-index (e.g., 999). Individual pages are placed below this layer and their stacking order is updated when navigating so that the top‑layer elements always stay on top.

Responsive adaptation

After the basic effect is working, the layout must adapt to different screen sizes and operating‑system UI chrome.

Mac OS + Chrome On a MacBook Pro (1440×900) with an external monitor (1920×1080) the visible height of Chrome is roughly 720px (screen height – 180 px). The 180 px consists of a 60 px dock, a 20 px top icon bar and 100 px for Chrome tabs, address bar and bookmark bar.

Windows + Chrome On a typical 1366×768 Windows display the visible height is about 618px (768 px – 150 px). The 150 px is split into a 40 px taskbar and 110 px for Chrome UI.

These heights are measured from screenshots and may have slight errors. Browser width usually matches the screen resolution, while height varies with OS and browser UI (e.g., Safari has no bookmark bar). The maximum UI height is around 180 px; it can be zero in full‑screen mode.

Common resolutions

Desktop:
1280×800
1366×1024 (iPad Pro)
1440×900
1680×1050
1600×900
1920×1200
2560×1440
2880×1620
3200×1800
5120×2880

Mobile:
360×480
412×732
iPhone 6: 375×667
iPhone 6 Plus: 414×736
iPhone X: 375×812
iPad (landscape): 768×1024

Widths ≤ 1024 px are treated as mobile; larger widths as desktop. Two adaptation strategies are common:

Create separate pages for mobile and desktop.

Design a single page that works on both, ensuring the mockup satisfies the constraints of each device class.

Why rem is problematic

Using rem for scaling requires many media‑query breakpoints, e.g.:

@media (max-width: 1024px) { html, body {font-size: 10px;} }
@media (max-width: 1366px) { html, body {font-size: 12px;} }
/* additional breakpoints for 1680, 1920, 2560, … */

Media queries based on width cannot prevent vertical overflow when the viewport height is reduced. Moreover, when the root font size drops below the browser’s minimum (typically 12 px), rem stops scaling, causing inconsistent UI.

Using viewport units ( vh / vw )

Modern browsers support vh and vw, where 1vh equals 1 % of the viewport height and 1vw equals 1 % of the viewport width. Converting a pixel value to vh is straightforward: value_px ÷ (viewport_height ÷ 100). For example, 300 px on a 720 px tall viewport equals 300 ÷ (720 ÷ 100) ≈ 41.666vh.

Sass helper functions

@function vh($value) { @return ($value / 1080 / 100) + vh; }
@function vw($value) { @return ($value / 1920 / 100) + vw; }
/* Usage: vh(300) or vw(300) */

Proposed solution: vh + vw + JavaScript

The final approach toggles a .vw-mode class on the root element:

All size declarations that originally use vh are replaced with vw inside .vw-mode, allowing a seamless switch.

The content is vertically centered when .vw-mode is active.

JavaScript detects the viewport aspect ratio; if the ratio is more vertical than a chosen threshold, it adds .vw-mode, otherwise it removes it.

Sample CSS

.homepage.vw-mode {
  font-size: vw(14);
  .com-width { width: vw(1190); }
  .hp-header { padding-top: vw(30); }
  /* …more rules … */
}

Sample JavaScript

this.resizeHandler = () => {
  const w = document.documentElement.clientWidth;
  const h = document.documentElement.clientHeight;
  const isVertical = w / h < 1370 / 890; // threshold
  $homepageElem.classList[isVertical ? 'add' : 'remove']('vw-mode');
};
this.resizeHandler();
window.addEventListener('resize', this.resizeHandler);

This combination ensures that the layout scales correctly on both desktop and mobile devices without the overflow issues caused by rem.

Mobile considerations

Mobile browsers cannot modify the UI chrome, so using vh (or vw) is the most reliable method for responsive sizing.

Key takeaways

Place shared UI elements on a top layer with a high z-index.

Prefer viewport units ( vh / vw) over rem for fluid scaling.

Encapsulate vw ‑based rules in a togglable class and switch it via JavaScript based on aspect ratio.

Test the layout across the common resolutions listed above to verify no overflow occurs.