Master Mobile Front-End Refactoring: Essential CSS Techniques & Tips

This series of tutorials is a practical guide summarizing the author's mobile front‑end refactoring experience and thoughts, providing a comprehensive analysis of sandal and sheral UI, originally published on imweb and w3cplus, with other unmarked content being reprints.

It has been two years since the previous mobile refactoring series; this new practical series repays that debt and revitalizes seven years of refactoring.

Before starting, a brief overview of the technologies used in this series is presented, also serving as a quick review of mobile front‑end refactoring techniques.

viewport

For detailed information about viewport, refer to the article "Deep Understanding of Viewport in Mobile Front-End Development".

<meta name="viewport" content="width=device-width, initial-scale=1.0">

css3 selectors

Structural pseudo‑class selectors have become standard for list components; not mastering them makes page development awkward.

CSS3 selector – attribute selector

CSS3 selector – pseudo‑class selector

CSS selector support overview

CSS selector reference

pseudo‑elements (::before, ::after)

Most retina 1px lines are generated using pseudo‑elements, and many other practical uses will be demonstrated in the upcoming refactoring tutorials.

A Whole Bunch of Amazing Stuff Pseudo Elements Can Do

Learning to use :before and :after pseudo‑elements

Using content in pseudo‑elements

percentages

About 80% of beginners ask whether all dimensions should use percentages, highlighting the importance of percentage units.

Various implementations of percentage width for mobile

new units – rem, vw, vh…

Following the first question, the next is whether to use rem.

Setting font size with REM in CSS3

Rem is not a cure‑all for mobile issues

Introduction to new units vw, vh (supported on Android 4.4+)

Note: This series does not heavily use these advanced units, but understanding them, especially vw and vh, is valuable for future projects.

flex

Flexbox is a well‑known layout tool; mastering it can speed up page development dramatically.

A complete Flexbox guide

Flex layout tutorial – syntax

A Complete Guide to Flexbox

retina 1px

Various tricks are used to achieve true 1px borders on retina screens.

Implementing 1px border effect on retina screens

How mobile devices achieve real 1px lines on retina displays

Android 4.3 does not support percentage background‑size, so consider alternatives; iOS 9 supports @supports, allowing simpler 0.5px borders. Below is the mixin definition from sandal:

// retina border
// 0.5px implementation for iOS9
@mixin retina-one-px() {
    @supports (border-width: 0.5px) {
        @media only screen and (-webkit-min-device-pixel-ratio: 2),
               screen and (-webkit-min-device-pixel-ratio: 3) {
            border-width: 0.5px;
        }
    }
}

fixed

Traditional fixed positioning has changed due to CSS3 transforms and virtual keyboard behavior, creating new bugs.

On Android we usually use fixed layout; on iOS we use absolute positioning with scrolling handled by -webkit-overflow-scrolling: touch;. Specific issues require case‑by‑case analysis.

Web mobile Fixed layout solutions

Deep understanding of stacking context and order in CSS

image height placeholder

Unlike PC, mobile images often lack fixed dimensions, causing layout shift during loading. The solution is to wrap the image in a container with height 0 and padding‑top based on the image’s aspect ratio, then position the image absolutely at 100% width and height.

.img-wrap {
    position: relative;
    height: 0;
    padding-top: 50%; // half of image width
}
.img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

How to achieve container scaling proportionally in CSS

centering

Centering is crucial; beyond traditional CSS2 methods, we now rely on CSS3 transform, flexbox, and await broader support for object‑position on images and videos.

Centering in CSS: A Complete Guide

object-fit

equal division

Equal division of space is as important as centering; three common approaches exist:

Items equally divided without considering spacing

Fixed spacing (e.g., 10px) with remaining width divided equally among items

Fixed item width with remaining spacing distributed evenly

These three scenarios will be analyzed in detail in this practical series.

css3 animations

Proficiency in multiple CSS3 animation techniques is now expected of any competent front‑end developer.

CSS3 transform 101

Advanced CSS3 2D and 3D Transform Techniques

CSS3 transition 101

CSS3 animation 101

CSS3: Animations vs. Transitions

CSS3 animation troubleshooting guide