Front-End Layout Techniques: Adaptive, Responsive, and Common Layout Methods

Adaptive layout refers to a single codebase that changes element sizes based on the viewport without rearranging columns; it is often confused with responsive design. Recommended methods include using flexbox, percentages, avoiding fixed widths/heights, adding scrollbars, and employing rem units.

Responsive layout uses one set of code to support mobile, tablet, and PC by loading different styles for various screen sizes. It aims to provide a consistent visual experience across devices.

The article provides a table of common mobile screen resolutions and aspect ratios, followed by a list of typical smartphone sizes and pixel densities.

Percentage layout adjusts element height, width, padding, border, and margin relative to the parent container. Vertical percentages for margin-top, margin-bottom, padding-top, and padding-bottom are calculated against the parent’s width, not its height. The main drawback is the difficulty of converting design specifications to percentages.

Media query layout uses @media rules to apply different CSS for specific screen widths. Example syntax:

// also can use different stylesheets for different media types
<link rel="stylesheet" media="mediatype and not only (media feature)" href="mystylesheet.css">
<link rel="stylesheet" href="styleB.css" media="screen and (max-width: 800px">
<!-- When the browser width is ≤800px, styleB.css is applied -->

Another example:

@media screen and (max-device-width:960px){
    body{background:red;}
}

Common breakpoint thresholds are listed (e.g., <576px for extra‑small, >=576px for small, up to >=1400px for xx‑large).

rem layout scales the page by dividing the viewport into 10 rem units; the root font‑size is set according to screen width (e.g., 750 px → 75 px, 640 px → 64 px, etc.).

vw/vh layout uses viewport width/height units where 1vw = 1% of the viewport width (e.g., on a 750 px design, 1vw = 7.5px).

Flexbox layout involves properties such as flex-direction, flex-wrap, justify-content, align-items, and child properties like order, flex-grow, flex-shrink, flex-basis, align-self.

The article also describes classic Holy Grail and double‑wing layouts, where left and right columns have fixed widths and the middle column adapts to the remaining space.