CSS Responsive - Notes By ShariqSP

Understanding CSS Responsive Design

Responsive design is a web development approach that ensures a website's layout and content adjust smoothly to various screen sizes, orientations, and resolutions. By using techniques like media queries, percentage-based widths, and flexible layouts, responsive design improves user experience on all devices.

Example 1: Fluid Layout

                    
                    /* Style for container */
                    .fluid-container {
                        width: 100%; /* Full width of the viewport */
                        max-width: 1200px; /* Restrict max width */
                        margin: 0 auto; /* Center align */
                        padding: 10px;
                    }

                    .fluid-container div {
                        background-color: #ffccbc;
                        padding: 20px;
                        margin: 10px 0;
                    }
                    
                

Explanation: The container adjusts its width to the viewport, with a maximum width of 1200px for large screens and padding for consistent spacing.

Example 2: Media Queries for Layout

                    
                    .responsive-container {
                        display: flex;
                        flex-wrap: wrap; /* Allow wrapping for smaller screens */
                    }

                    .responsive-container div {
                        flex: 1 1 50%; /* Default: Two columns */
                        padding: 10px;
                        background-color: #c5e1a5;
                    }

                    /* Single-column layout for small screens */
                    @media (max-width: 600px) {
                        .responsive-container div {
                            flex: 1 1 100%; /* Full width for each item */
                        }
                    }
                    
                

Explanation: The layout switches from two columns on larger screens to a single-column layout for screens smaller than 600px.

Example 3: Responsive Images

                    
                    img {
                        width: 100%; /* Scale to the container width */
                        height: auto; /* Maintain aspect ratio */
                    }
                    
                

Explanation: The image automatically scales down or up based on the container's width, maintaining its aspect ratio.

Example 4: Responsive Navigation Bar

                    
                    nav ul {
                        display: flex;
                        flex-wrap: wrap;
                        list-style: none;
                        padding: 0;
                        margin: 0;
                    }

                    nav ul li {
                        flex: 1; /* Equal spacing for each item */
                        text-align: center;
                        padding: 10px;
                        background-color: #81d4fa;
                    }

                    /* Stacked navigation for small screens */
                    @media (max-width: 768px) {
                        nav ul {
                            flex-direction: column;
                        }

                        nav ul li {
                            flex: none; /* Remove equal spacing */
                        }
                    }
                    
                

Explanation: The navigation bar is horizontal on larger screens but switches to a stacked layout on screens smaller than 768px.

Example 5: Typography Adjustments

                    
                    body {
                        font-size: 16px; /* Default font size */
                    }

                    /* Larger font for large screens */
                    @media (min-width: 1200px) {
                        body {
                            font-size: 20px;
                        }
                    }

                    /* Smaller font for small screens */
                    @media (max-width: 600px) {
                        body {
                            font-size: 14px;
                        }
                    }
                    
                

Explanation: The font size adjusts for different screen sizes to ensure readability: smaller on mobile and larger on desktops.