Responsive Design

Last updated: 2025-09-25 02:02:49

Responsive Web Design

Responsive design ensures your website works well on all device sizes.

Media Queries

/* Mobile styles */
.container {
    width: 100%;
    padding: 10px;
}

/* Tablet styles */
@media (min-width: 768px) {
    .container {
        max-width: 750px;
        margin: 0 auto;
    }
}

/* Desktop styles */
@media (min-width: 1200px) {
    .container {
        max-width: 1140px;
        padding: 20px;
    }
}

Flexible Grid System

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.flex-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.flex-item {
    flex: 1 1 300px;
    margin: 10px;
}

Responsive Images

<img src="small.jpg" 
     srcset="small.jpg 480w, 
             medium.jpg 800w, 
             large.jpg 1200w"
     sizes="(max-width: 480px) 100vw,
            (max-width: 800px) 50vw,
            33vw"
     alt="Responsive image">