Css Responsive

What is Responsive in CSS?

Responsive design is a design strategy, which considers different screen sizes, devices, and orientations, and provides a solution, which adapts.

Consequently, media queries as such are designed to customize styles in accordance to the features of the devices.

Media Query for Different Screen Sizes:

This example uses a media query to set a smaller font size for screens with a width of 768 pixels or less.

                          
                            body {
                                font-size: 16px; /* Default font size for all screens */
                            }
                            
                            @media screen and (max-width: 768px) {
                                body {
                                    font-size: 14px; /* Adjust font size for screens with a width of 768 pixels or less */
                                }
                            }

Media Query for Responsive Layout:

This example adjusts the width and margin of a container based on the screen size using media queries.

                          
                            .container {
                                width: 100%; /* Set the container width to 100% of its parent by default */
                            }
                            
                            @media screen and (min-width: 768px) {
                                .container {
                                    width: 80%; /* Adjust container width for screens with a width of 768 pixels or more */
                                    margin: 0 auto; /* Center the container on larger screens */
                                }
                            }

Responsive Images:

This example ensures that images are responsive by setting their maximum width to 100% of their container.

                          
                            img {
                                max-width: 100%; /* Make images responsive by setting their maximum width to 100% */
                                height: auto; /* Maintain the aspect ratio by adjusting the height automatically */
                            }

Hide or Show Elements Based on Screen Size:

This example hides an element on larger screens using a media query.

                          
                            .mobile-only {
                                display: block; /* Show on all screens by default */
                            }
                            
                            @media screen and (min-width: 768px) {
                                .mobile-only {
                                    display: none; /* Hide on screens with a width of 768 pixels or more */
                                }
                            }

Responsive Navigation:

This example hides and shows navigation based on screen size using a media query.

                          
                            nav {
                                display: none; /* Hide the navigation by default */
                            }
                            
                            @media screen and (min-width: 768px) {
                                nav {
                                    display: block; /* Show the navigation on screens with a width of 768 pixels or more */
                                }
                            }

Responsive Typography:

This example adjusts the font size based on the screen size using a media query.

                          
                            body {
                                font-size: 16px; /* Default font size for all screens */
                            }
                            
                            @media screen and (min-width: 768px) {
                                body {
                                    font-size: 18px; /* Adjust font size for screens with a width of 768 pixels or more */
                                }
                            }

Responsive Flexbox:

The code flexbox with a media query illustrates how to make the layout responsive with items having flexible width by adjusting the width dynamically on certain viewport widths.

                          
                            .container {
                                display: flex;
                                flex-wrap: wrap; /* Allow flex items to wrap on smaller screens */
                            }
                            
                            .item {
                                flex: 1; /* Equal width for flex items */
                                margin: 5px; /* Add spacing between flex items */
                            }