Responsive Design

📱 Responsive Design Kya Hai?

Hindi

Responsive Design ka matlab hai website ka layout screen ke size ke according automatically adjust hona.

Ek responsive website mobile, tablet aur computer sabhi devices par properly दिखाई देती hai.

English

Responsive Design means creating a website that automatically adjusts its layout according to the screen size of the device.

⭐ Responsive Design Kyun Important Hai?

Hindi

Aaj ke time mein users website ko mobile, tablet aur desktop sabhi devices par open karte hain.

Isliye website ko har screen size par readable aur easy to use hona chahiye.

English

Users access websites from different devices. A responsive design provides a better experience on mobile, tablet and desktop screens.

🔍 1. Viewport Meta Tag

Hindi

Responsive website banane ke liye HTML ke head section mein viewport meta tag add karna important hai.

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

English

The viewport meta tag helps the browser control the webpage's size and scaling on different devices.

↔️ 2. Flexible Width

Hindi

Fixed width ke bajay percentage ya max-width use karne se elements different screens par better adjust hote hain.

.container{
    width:90%;
    max-width:1100px;
    margin:auto;
}

English

Flexible widths allow elements to adjust according to the available screen space.

📐 3. Responsive Grid

Hindi

CSS Grid ka use karke multiple cards ko columns mein arrange kiya ja sakta hai.

.grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
}

Mobile screen par columns ki number kam ki ja sakti hai.

@media(max-width:600px){

    .grid{
        grid-template-columns:1fr;
    }

}

English

CSS Grid can create multiple columns on large screens and fewer columns on smaller screens.

📲 4. Media Query

Hindi

Media Query CSS ka ek important feature hai. Isse hum different screen sizes ke liye different CSS rules likh sakte hain.

@media(max-width:600px){

    body{
        font-size:14px;
    }

    h1{
        font-size:28px;
    }

}

English

Media queries allow CSS rules to change according to the screen size.

🖼️ 5. Responsive Images

Hindi

Image ko responsive banane ke liye width ko maximum available space ke according set kiya ja sakta hai.

img{
    max-width:100%;
    height:auto;
}

English

Responsive images should scale within their available space without losing their proportions.

💻 Complete Responsive Example

Hindi

Neeche ek simple responsive website section ka example hai:

<!DOCTYPE html>

<html>

<head>

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

<style>

.container{
    width:90%;
    max-width:1000px;
    margin:auto;
}

.cards{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
}

.card{
    padding:25px;
    background:white;
    border-radius:12px;
}

@media(max-width:600px){

    .cards{
        grid-template-columns:1fr;
    }

}

</style>

</head>

<body>

<div class="container">

    <h1>Our Services</h1>

    <div class="cards">

        <div class="card">
            Website Design
        </div>

        <div class="card">
            Web Development
        </div>

        <div class="card">
            Digital Marketing
        </div>

    </div>

</div>

</body>

</html>

English

In this example, three cards appear in columns on larger screens. On smaller screens, the cards become one column using a media query.