Responsive CSS कैसे करें सभी डिवाइस के लिए

(Responsive CSS) – दोस्तों पहले के टाइम में बदलाव आनें में और बदलाव लानें में समय लगता था लेकिन आज के दौर में बदलाव आनें में समय नहीं लगता, इसका सबसे बड़ा उदहारण है इंटरनेट और IT कंपनीज |

इंटरनेट आनें के बाद लोग अपनें काम को बढानें के लिए अपनें बिजनेस को online ले जा रहे हैं | online बिजनेस करनें के लिए या online प्रोडक्ट बेचनें के लिए एक website का होना जरूरी है, और एक website को सही लोगों तक पहुँचाने में सर्च इंजन का अहम रोल होता है, और आपको तो सब पता ही है की दुनिया का सबसे बड़ा सर्च इंजन google है |

आज के समय में सभी कम्पनियों का इको सिस्टम बनता जा रहा है, जैसे की पहले के समय में मोबाइल और अन्य डिवाइस ज्यादा नहीं हुवा करती थीं | लेकिन आज के समय में लगभग 70% लोगों के पास एंड्राइड या फिर कोई other डिवाइस है |

इन बदलावों के कारण google ने एक अपडेट कर दिया था जो की user फ्रेंडली और सभी device फ्रेंडली था |

google नें website responsive पर अपडेट करते हुए कहा की जो website मोबाइल फ्रेंडली या other डिवाइस फ्रेंडली नहीं होगी तो वो website google में रैंक नहीं कर पायेगी | यानीं साफ़-साफ़ शब्दों में कहें तो responsive website एक रैंकिंग factor बन गया हैं |

अगर आपकी website अच्छे तरीके से responsive है तो आपकी website google पर रैंक कर सकती है |

Responsive Website क्या है ?

What is Responsive Website – जो website सभी devices में अच्छे तरीके से या व्यवस्थित तरीके से open हो तो उस website को हम responsive website कह सकते हैं |

यहाँ सभी devices का मतलब है सभी डेस्कटॉप से लेकर सभी मोबाइल तक | एक उदहारण से समझते हैं –

आपकी एक website है जो आपनें डेस्कटॉप या लेपटोप में बनाई है, तो डेस्कटॉप या लेपटोप तक आप अपनीं website को सिमित नहीं रख सकते हैं | आपकी website सभी devices में सही ढंग से open होनीं चाहिए क्योंकि जरूरी नहीं है की सभी user आपकी website को डेस्कटॉप या लेपटोप में ही open करे |

सभी user आपकी website को अलग-अलग devices में open कर सकते हैं जिसमें मोबाइल सबसे महत्वपूर्ण है इसलिए आपकी website का मोबाइल फ्रेंडली होना अनिवार्य है क्योंकि आज सबसे ज़्यादा लोग मोबाइल का इस्तेमाल करते हैं और अपने सभी काम मोबाइल से करते है |

Responsive Website बनानें के लिए आपको अपनीं तरफ से प्रयास करने की जरूरत होती है जिनमें शामिल है Responsive CSS, Responsive CSS की मदद से हम एक प्रोफेशनल website बना सकते हैं जो user फ्रेंडली और मोबाइल फ्रेंडली दोनों होगी |

CSS-3 में काफी प्रॉपर्टी हैं जिनकी मदद से हम responsive website बना सकते हैं | और आज के आर्टिकल में आप उन प्रॉपर्टी के बारे में सीखनें वाले हैं इसलिए आर्टिकल को अंत तक पढ़ते रहें |

Responsive CSS

Responsive CSS की मदद से हम अपनीं पूरी website को सही ढंग से present कर सकते हैं लोगों के सामनें लेकिन इसके लिए आपको Responsive CSS का ज्ञान होना जरूरी है |

Responsive CSS में काफी चीजें हैं जिनमें सबसे पहले आती है @media query

@media query सिलेक्टर से हम किसी भी device की width को डिफाइन कर सकते हैं जो की responsive website का सबसे बड़ा पार्ट है | @media query को आप अलग-अलग तरीके से लिख सकते हैं | @media query को हम code की भाषा से आसानी से समझ सकते हैं |

@media Rule को आप अलग-अलग तरीके से डिफाइन कर सकते हैं, एक उदहारण से समझनें की कोशिश करते हैं |

@media screen and (max-width: 1200px){
	/*your-css-code*/
}
@media only screen and (max-width: 1200px) {
	/*your-css-code*/
}
@media (max-width: 1200px){
	/*your-css-code*/
}

इसमें कुछ वर्ड हैं only और screen and, ये सब media rule उन पुरानें browsers के लिए लगाए जाते थे जो @media Query को support नहीं करते थे लेकिन आज के modern browser सभी तरह की media query को support करते है और आसानी से आपके दिए हुए कोड को समझते हैं |

अब मैं आपको Responsive CSS को example से समझानें की कोशिश करता हूँ |

<h1>Responsive Web Design</h1>

Apply CSS

h1{
	font-size: 100px;
	text-align: center;
	margin-top: 50px;
}
/* Responsive CSS */
@media (max-width: 1200px){
	h1{font-size: 50px;}
}
@media (max-width: 767px){
	h1{font-size: 30px;}
}
@media (max-width: 520px){
	h1{font-size: 20px;}
}

दोस्तों ये तरीका सही है लेकिन इस तरीके से हमें कोडिंग दोगुनी करनीं होगी और हमें CSS का code भी काफी ज्यादा लिखना होगा, इससे बचनें के तरीके हैं जो आप निचे देख सकते हैं |

font size के लिए हम Fluid Typography का use कर सकते हैं तो इसके लिए एक syntax है जिसका use आपको करना है कुछ इस तरह से –

font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width])));

h1{
  font-size: calc(20px + (100 - 20) * ((100vw - 320px) / (1920 - 320)));
}

इस syntax में आप देख सकते हैं की heading की font साइज़ 1920 regulation में 100px और 320 regulation तक आते-आते 20px हो रही है अपनें आप यानी कि ये CSS अपनें आप calculate करती है font size को,

दोस्तों font size के आलावा आप margin padding भी calculate कर सकते हैं एक ही जगह से, इस तरह से अगर आप काम करते हैं तो इससे आपका टाइम और code दोनों बचता है और आपके काम की स्पीड में इज़ाफ़ा होता है |

यहाँ तक हमने बात कर ली font size की लेकिन columns का क्या ?

दोस्तों columns और section की responsive करनें के लिए भी CSS में काफी प्रॉपर्टी हैं जिनका इस्तेमाल आपको करना चाहिए |

Responsive grid layout examples

CSS की grid प्रॉपर्टी है जो responsive के लिए काफी काम आती है, तो अब हम grid के जरिये अलग-अलग तरीके से columns की responsive करते हैं |

Must Read –

1. Ion Icons क्या है ?
2. Customize WordPress Login Page In Hindi
3. WordPress Dashboard Tutorial Hindi

Responsive grid layout Example

<ul class="grid-example-1">
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
</ul>

HTML Document की CSS

ul{
	list-style: none;
	padding: 0 20px;
	margin: 20px 0px;
}
li{
	background: #ccc;
	height: 200px;
	width: auto;
	border-radius: 10px;
}
.grid-example-1{
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	grid-gap: 15px;
}
@media (max-width: 767px){
	.grid-example-1{grid-template-columns: repeat(2, 1fr);}
}
@media (max-width: 520px){
	.grid-example-1{grid-template-columns: repeat(1, 1fr);}
}

इससे भी आसान तरीका है Responsive grid layout Examples – 2 वाला

<ul class="grid-example-2">
	<li>A</li>
	<li>B</li>
	<li>C</li>
	<li>D</li>
	<li>E</li>
	<li>F</li>
</ul>

HTML Document की CSS

ul{
	list-style: none;
	padding: 0 20px;
	margin: 20px 0px;
}
li{
	background: #ccc;
	height: 200px;
	width: auto;
	border-radius: 10px;
	font-size: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.grid-example-2{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	grid-gap: 10px;
}

ऊपर आपने एक grid का example देखा, grid के ज़रिए आप responsive कर सकते हैं लेकिन इससे भी बेहतर उपाय है जो की flex है, दोस्तों flex के इस्तेमाल से आप बेहतर और कम कोडिंग में किसी भी वेबसाइट को responsive बना सकते हैं नीचे आपको अच्छे example मिल जाएँगे.

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
ul{
	list-style: none;
	padding: 0 20px;
	margin: 20px 0px;
}
li{
	background: #ccc;
	height: 200px;
	width: auto;
	border-radius: 10px;
	font-size: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
    padding: 50px;
    flex-basis: 20%;
}
.flex{
	display: flex;
	flex-wrap: wrap;
    flex: 1 1 auto;
    gap: 20px;
    justify-content: center;
}
</style>
</head>
<body>
<ul class="flex">
	<li>A</li>
	<li>B</li>
	<li>C</li>
	<li>D</li>
	<li>E</li>
	<li>F</li>
</ul>

</body>
</html>

Conclusion

आज के आर्टिकल में आपनें सिखा की responsive CSS क्या है और Responsive CSS के इस्तेमाल से कैसे हम एक अच्छी mobile फ्रेंडली website बना सकते हैं |

उम्मीद है दोस्तों Responsive CSS का आर्टिकल आपको helpful लगा होगा अगर आपको ये आर्टिकल helpful लगा है तो आप इस आर्टिकल को अपनें दोस्तों के साथ share जरुर करें |

ताज़ा अपडेट पानें के लिए आप मेरे social media से जुड़ सकते हैं |

धन्यवाद