Responsive Layout Techniques Using CSS Viewport Units, Media Queries, and JavaScript

First, the article shows the desired effect diagram and the author's initial design concept.

It suggests placing common elements such as the header, footer, navigation bar, and borders at the top layer with a high z-index (e.g., 999) and adjusting the layer of each independent page during navigation to achieve the visual effect.

Next, the author analyses viewport heights on different systems (Mac OS + Chrome, Windows + Chrome) by calculating the usable height (for example, 720 px for a 1440 × 900 display after subtracting 180 px for UI chrome) and provides concrete dimension tables for common PC, Mac, Android, and iOS resolutions.

Based on these measurements, two responsive strategies are discussed: creating separate pages for mobile and PC, or designing a single page that adapts to both.

The article then explains why using rem alone can cause overflow when only the width changes, and proposes using viewport units ( vh , vw ) for scaling, supplemented by rem for font sizing.

Sample CSS media queries are shown that change the root font-size at breakpoints (1024 px, 1366 px, etc.), and a Sass function is introduced to convert pixel values to vh or vw based on the design draft size.

@function vh($value) {
  @return ($value / 1080 / 100) + vh;
}
@function vw($value) {
  @return ($value / 1920 / 100) + vw;
}

A JavaScript resize handler is provided to toggle a .vw-mode class when the viewport aspect ratio becomes vertical, allowing the page to switch between vh and vw scaling.

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

Finally, the author presents the complete CSS and JS snippets for the .homepage.vw-mode layout, discusses mobile‑only considerations, and links to a live demo.