Konda 👨‍💻 Coder: CSS RESPONSIVE

Responsive Introduction

Responsive web design ensures that a website looks good on all devices, including desktops, tablets, and mobile phones. It uses flexible layouts, flexible images, and media queries to achieve this.

Responsive Viewport

The viewport meta tag is used to control the layout on mobile browsers. It helps ensure that the webpage is scaled correctly on different devices.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Responsive Viewport</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
        }

        .responsive-container {
            background-color: lightblue;
            padding: 20px;
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="responsive-container">
        This container is responsive!
    </div>
</body>

</html>

Responsive Breakpoint

Responsive breakpoints are specific points where the layout of the webpage changes to accommodate different screen sizes. Breakpoints are defined using media queries.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Responsive Breakpoint</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .box {
            background-color: lightcoral;
            padding: 20px;
            margin: 10px;
            text-align: center;
        }

        /* Desktop */
        @media (min-width: 1024px) {
            .box {
                background-color: lightgreen;
                width: 50%;
                margin: auto;
            }
        }

        /* Tablet */
        @media (min-width: 768px) and (max-width: 1023px) {
            .box {
                background-color: lightblue;
                width: 70%;
                margin: auto;
            }
        }

        /* Mobile */
        @media (max-width: 767px) {
            .box {
                background-color: lightcoral;
                width: 90%;
                margin: auto;
            }
        }
    </style>
</head>

<body>
    <div class="box">
        Responsive Box
    </div>
</body>

</html>

Media Queries

Media queries are a fundamental part of responsive web design, allowing you to apply CSS rules based on the characteristics of the device, such as width, height, and orientation.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Media Queries</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
        }

        .responsive-text {
            font-size: 18px;
        }

        /* Large screens */
        @media (min-width: 1024px) {
            .responsive-text {
                font-size: 24px;
                color: darkblue;
            }
        }

        /* Medium screens */
        @media (min-width: 768px) and (max-width: 1023px) {
            .responsive-text {
                font-size: 20px;
                color: darkgreen;
            }
        }

        /* Small screens */
        @media (max-width: 767px) {
            .responsive-text {
                font-size: 16px;
                color: darkred;
            }
        }
    </style>
</head>

<body>
    <p class="responsive-text">
        This text changes size and color based on the screen width.
    </p>
</body>

</html>

Putting It All Together

Here's a comprehensive example that includes a responsive layout with a responsive navbar, images, and text:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Responsive Web Design</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }

        .navbar {
            background-color: #333;
            overflow: hidden;
        }

        .navbar a {
            float: left;
            display: block;
            color: white;
            text-align: center;
            padding: 14px 20px;
            text-decoration: none;
        }

        .navbar a:hover {
            background-color: #575757;
        }

        .container {
            padding: 20px;
        }

        .responsive-image {
            width: 100%;
            height: auto;
        }

        .responsive-text {
            font-size: 18px;
        }

        /* Large screens */
        @media (min-width: 1024px) {
            .responsive-text {
                font-size: 24px;
                color: darkblue;
            }
        }

        /* Medium screens */
        @media (min-width: 768px) and (max-width: 1023px) {
            .responsive-text {
                font-size: 20px;
                color: darkgreen;
            }
        }

        /* Small screens */
        @media (max-width: 767px) {
            .responsive-text {
                font-size: 16px;
                color: darkred;
            }
        }
    </style>
</head>

<body>
    <div class="navbar">
        <a href="#home">Home</a>
        <a href="#about">About</a>
        <a href="#services">Services</a>
        <a href="#contact">Contact</a>
    </div>

    <div class="container">
        <h1>Welcome to Our Responsive Website</h1>
        <img src="https://via.placeholder.com/800x400" alt="Sample Image" class="responsive-image">
        <p class="responsive-text">
            This text and image adjust based on the screen size. Resize the window to see the changes.
        </p>
    </div>
</body>

</html>

Konda 👨‍💻 Coder

Pages

Thursday, June 20, 2024

CSS RESPONSIVE

No comments:

Post a Comment