Mobile Web Development

Viewport Configuration

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

Multi-Column Layout

.article-content {
    column-count: 4;
    column-gap: 20px;
    column-rule: 1px solid #ccc;
}

.article-content h2 {
    column-span: all;
    text-align: center;
}

.article-content .card {
    break-inside: avoid;
}

Responsive Design

@media (min-width: 1200px) {
    .container { background: coral; }
}

@media (min-width: 768px) and (max-width: 1199px) {
    .container { background: teal; }
}

@media (max-width: 767px) {
    .container { background: lavender; }
}

@media (orientation: portrait) {
    .mobile-menu { display: block; }
}

CSS Units

• px: Browser default 16px, minimum 12px
• em: Relative to parent font size
• rem: Relative to root element font size
• vw: 100vw = viewport width
• vh: 100vh = viewport height

Helper Techinques

/* Hide scrollbar */
::-webkit-scrollbar { display: none; }

/* Prevent flex item shrinking */
.carousel-item { flex-shrink: 0; }

Visual Effects and Animation

Gradients

/* Linear gradient */
.banner {
    background: linear-gradient(135deg, magenta 20%, cyan 80%);
}

/* Radial gradient */
.card-highlight {
    background: radial-gradient(circle closest-side at 30% 70%, gold, maroon);
}

/* Repeating gradient */
.stripes {
    background: repeating-linear-gradient(45deg, navy, indigo 10%);
}

Transitions

.interactive-element {
    transition: transform 0.4s ease-out, opacity 0.3s;
}

.interactive-element:hover {
    transform: translateY(-10px) scale(1.05);
    opacity: 0.9;
}

Keyframe Animations

@keyframes pulsate {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

.animated-icon {
    animation: pulsate 2s ease-in-out infinite;
    animation-fill-mode: both;
}

3D Transformations

<div class="stage">
    <div class="cube">
        <div class="front"></div>
        <div class="back"></div>
        <!-- Additional faces -->
    </div>
</div>

<style>
    .stage {
        perspective: 800px;
        transform-style: preserve-3d;
    }
    
    .cube {
        transform-style: preserve-3d;
        transition: transform 1s;
    }
    
    .stage:hover .cube {
        transform: rotateY(180deg) translateZ(100px);
    }
</style>

Grid Layout System

<div class="gallery">
    <div class="featured"></div>
    <div></div>
    <!-- More items -->
</div>

<style>
    .gallery {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 15px;
        place-items: center;
    }
    
    .featured {
        grid-column: span 2;
        grid-row: span 2;
    }
</style>