Master Fluid Layouts with CSS Viewport Units (vw, vh) for Perfect Responsive Design

Responsive layouts have traditionally relied on media queries or rem‑based scripts, which require multiple breakpoints and extra JavaScript. With modern mobile browsers now fully supporting viewport units, developers can achieve true fluid designs that adapt to any screen size.

Understanding Viewport Units

The term “viewport” refers to the visible area of a page. On desktop it is simply the browser’s visible region, while on mobile there are three viewports: Layout Viewport, Visual Viewport, and Ideal Viewport. CSS viewport units are based on the Layout Viewport.

vw : 1 % of the viewport width.

vh : 1 % of the viewport height.

vmin : the smaller of vw and vh.

vmax : the larger of vw and vh.

Unlike the % unit, which is relative to an element’s parent, viewport units are always relative to the size of the viewport itself.

Browser Compatibility

Viewport units are supported in iOS 8+ and Android 4.4+, as well as the WeChat X5 kernel, providing near‑universal coverage for modern mobile browsers.

Approach 1: Pure vw Layout

All dimensions—fonts, margins, widths, heights—are expressed in vw. A Sass helper converts pixel values to vw based on a design width (e.g., iPhone 6 width of 375 px).

$vm_base: 375;
@function vw($px) {
    @return ($px / 375) * 100vw;
}

Example component styling:

.mod_nav {
    background-color: #fff;
    &_list {
        display: flex;
        padding: vm(15) vm(10) vm(10);
        &_item {
            flex: 1;
            text-align: center;
            font-size: vm(10);
            &_logo {
                display: block;
                margin: 0 auto;
                width: vm(40);
                height: vm(40);
                img {
                    display: block;
                    margin: 0 auto;
                    max-width: 100%;
                }
            }
            &_name { margin-top: vm(2); }
        }
    }
}

Physical‑pixel borders are created with a scaled ::after pseudo‑element:

.mod_grid {
    position: relative;
    &::after {
        content: '';
        position: absolute;
        z-index: 1;
        pointer-events: none;
        background-color: #ddd;
        height: 1px;
        left: 0; right: 0; top: 0;
        @media only screen and (-webkit-min-device-pixel-ratio: 2) {
            -webkit-transform: scaleY(0.5);
            -webkit-transform-origin: 50% 0%;
        }
    }
    ...
}

Aspect‑ratio‑preserving images use padding‑top:

.mod_banner {
    position: relative;
    padding-top: percentage(100 / 700);
    height: 0;
    overflow: hidden;
    img {
        width: 100%;
        height: auto;
        position: absolute;
        left: 0; top: 0;
    }
}

Approach 2: Hybrid vw + rem Layout

This method keeps the flexibility of vw while adding min/max width constraints via rem. The root font size is set with vw, then limited with media queries; the body receives explicit max‑ and min‑width values.

// Base font size for iPhone 6 (75 px)
$vm_fontsize: 75;
@function rem($px) {
    @return ($px / $vm_fontsize) * 1rem;
}

// Root font size using vw
$vm_design: 750;
html {
    font-size: ($vm_fontsize / ($vm_design / 2)) * 100vw;
    @media screen and (max-width: 320px) { font-size: 64px; }
    @media screen and (min-width: 540px) { font-size: 108px; }
}
body {
    max-width: 540px;
    min-width: 320px;
}

Using this hybrid approach improves visual experience by preventing layouts from becoming excessively wide or narrow, while still allowing a seamless transition from a rem‑based system to pure vw when browser support matures.

Conclusion

Both methods enable fluid, breakpoint‑free designs, but the hybrid vw + rem technique offers better visual control and future‑proofs projects for a gradual shift to viewport units.

References

基于视口单位的网页排版

(转）基于视口单位的网页排版

[翻译]使用VH和VW实现真正的流体排版