Behavior-Preset Dynamic Layout for Full-Screen Pages

As front-end engineers, layout is fundamental. The article addresses the challenge of designing “full-screen” layouts for the Wukong activity platform across diverse devices.

It introduces a behavior‑preset dynamic layout scheme based on DPR and rem units, allowing pages to adapt at runtime without writing multiple style sets.

Problems identified:

Design drafts are single, but devices vary in aspect ratio (3:4, 9:16, 9:19, 9:21) and resolution (480p‑2k).

Manually writing styles for hundreds or thousands of devices is infeasible.

Universal solution: Use rem‑based elastic layout where the root font size is calculated from the device pixel ratio (DPR). This approach reproduces the design draft across screens with minimal extra work.

Advantages: one stylesheet fits all sizes; conversion plugins (px → rem) add little overhead.

Limitations: In “full‑screen” scenarios (page content exactly fills the viewport) the simple rem scheme can cause bottom whitespace or vertical overflow.

Initial optimizations include:

Background adaptation: stretch‑fill ( background-size: 100% 100%; ) or cover ( background-size: cover; background-position: center; ).

Element positioning using fixed positioning and anchor‑based offsets.

Further “refinement” introduces preset rules for background and internal element behavior.

Preset rules:

Background image size options (default, stretch, contain, cover, repeat).

Element scaling behavior: major (priority) vs. minor elements, with scale types zoomIn , zoomOut , or standard .

Anchor concept: elements have an anchor point (e.g., center) that can be attached to any viewport edge (top, bottom, left, right) or kept proportionally centered.

Formulas for calculating realTop , realLeft , and scale based on base dimensions (baseW, baseH) and actual viewport dimensions (realW, realH).

Key code snippets:

// Calculate viewport height ratio
windowHeightRatio = realH / baseH;

// Determine scale based on scaleType
switch (scaleType) {
  case 'zoomIn':
    scale = windowHeightRatio >= 1 ? windowHeightRatio : 1;
    break;
  case 'zoomOut':
    scale = windowHeightRatio >= 1 ? 1 : windowHeightRatio;
    break;
  default:
    scale = 1;
}

// Compute realTop for a top‑anchored element
realTop = height / 2 + baseTop - (height * scale) / 2;

// Compute realLeft for a left‑anchored element
realLeft = baseLeft + width / 2 - (width * scale) / 2;

Final style generation example for a full‑screen element:

style = `
  top: ${realTop}rem;
  left: ${realLeft}rem;
  width: ${width}rem;
  height: ${height}rem;
  transform: scale(${scale});
`;

The scheme has been integrated into the Wukong activity platform and is used in production for many full‑screen topics, such as the “vivo Browser Year‑End Planning” showcase.

In summary, the behavior‑preset dynamic layout provides a flexible, scalable method for front‑end developers to create full‑screen pages that adapt gracefully to a wide range of device viewports.