Mastering Responsive Web Design: From Layout to Code

Responsive web design (RWD) is an approach to web design aimed at crafting sites to provide an optimal viewing and interaction experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones).

Why Write This Article

The author previously wrote a CSS‑focused article on responsive breakpoints, but building a truly responsive page requires layout design from the start and consideration of structure, presentation, and interaction.

Because the current mini‑project has a short development cycle and must work on all platforms, a fully responsive page was chosen to achieve code reuse, reduce development and maintenance costs, and share the experience.

Approaches to Implement a Fully Responsive Page

Note: The code in this page is for illustration only and may need adjustments for real use.

Establishing Responsive DNA at the Structure Layer (HTML)

A responsive page typically uses grid or fluid layouts, requiring modular elements that adapt to different device sizes. For example, a news item can be designed as a card with a clear HTML structure:

<code>&lt;div class='news-item'&gt;
    &lt;div class='head'&gt;
        &lt;div class='source'&gt;
            &lt;img src='...' class='avatar' /&gt;
            &lt;span&gt;中国统计网&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class='title one-line'&gt;腾讯官方首次发布微信用户数据&lt;/div&gt;
        &lt;div class='time'&gt;2015-10-26 18:01&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class='content'&gt;
        &lt;div class='cover'&gt;
            &lt;img src='...' /&gt;
        &lt;/div&gt;
        &lt;div class='abstract'&gt;
            在今天举办的 2015 腾讯全球合作伙伴大会「互联网+微信」的分论坛上，微信官方第一次公开了微信用户数据。
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class='bar'&gt;
        &lt;div class='read-count item'&gt;阅读量：1335&lt;/div&gt;
        &lt;div class='like-count item'&gt;点赞数：986&lt;/div&gt;
        &lt;div class='comment-count item'&gt;评论数：166&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;</code>

Because the hierarchy is clear, styles can be easily modified for different scenarios, and tables should be avoided for layout.

It is also important to set the viewport meta tag to tell browsers the page width and disable scaling.

<code>&lt;meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /&gt;</code>

Leveraging CSS for Responsive Presentation

CSS is the key to a fully responsive page. The following technical points are essential:

Make full use of the

position

property (e.g., fixed full‑screen positioning, relative/absolute combos for precise placement).

Prefer percentages over pixels for width, height, and padding where possible.

Use media queries to define different style rules for various screen sizes.

Employ flexbox (

display:flex

) for fluid layouts, centering, and responsive components.

Combining a pre‑processor like SASS or LESS adds variables, mixins, and nesting, improving reusability and maintainability. Below is a typical LESS snippet used in a full‑responsive page.

<code>@font-face {
    font-family: "NotoSansCJKsc";
    src: url("../fonts/NotoSansCJKsc-Black.otf");
    src: local("NotoSansCJKsc Black"), local("NotoSansCJKsc");
}
@primary: #f0c52e;
@black: #202020;
@white: #f7f7f7;
@background: #e8e7e7;
@highlight: rgb(255, 64, 129);
@hover: #3498DB;
@gray: fadeout(@black, 50%);
</code>

Define mixins, functions, and global styles, then modify native element styles.

<code>.avatar(@width:120px, @border:5px, @border-color:#fff, @margin:0px){
    border: @border solid @border-color;
    color: #eeeeee;
    width: @width;
    height: @width;
    margin: 5px;
    border-radius: 50%;
    margin: @margin !important;
}
.one-line{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
body{ padding:10px 20px 20px 20px; background-color:@background; }
</code>

Use nested rules to style block‑level elements.

<code>.news{
    padding:5px;
    margin-top:10px;
    border-radius:10px;
    .head{
        position:relative;
        .source img.avatar{ .avatar(50px,2px,0); }
        span{ color:@highlight; }
        .title{ color:@black; font-weight:bolder; font-size:20px; }
        .time{ position:absolute; top:5px; right:5px; color:@gray; }
    }
    .content{
        .cover img{ max-width:200px; max-height:200px; }
        .abstract{ font-size:15px; line-height:150%; }
    }
    .bar .item{
        width:33%; color:@highlight; text-align:center;
        &:hover{ color:@hover; }
    }
}
</code>

Apply media queries to adjust styles for different device widths.

<code>// Width ≤ 768px (tablet portrait, phone)
@media screen and (max-width:768px){
    .body{ padding-left:0; padding-right:0; }
    .news{ padding:3px; .head{ position:relative; .source img.avatar{ .avatar(30px,2px,0); } .title{ font-size:15px; } .time{ display:none; } } .content .cover img{ max-width:80px; max-height:80px; } }
}
</code>

Enhancing Responsive Experience with JavaScript

JavaScript can detect device type, size, and hardware resources, allowing you to execute different code paths for better user experience, such as binding gesture events on mobile browsers or hiding UI elements in hybrid apps.

Note: JavaScript typically runs only on page load and event callbacks; simply resizing the window will not trigger style changes unless a resize listener is implemented.

For further reading, see Ethan Marcotte’s article “Responsive Web Design”.