Google search engine

Responsive web design क्या है | responsive web designing in hindi – What is a responsive design

आज हम सीखेंगे Responsive web design क्या है smartphone का इस्तेमाल बहुत ज्यादा होने के कारण आजकल हर आदमी किसी website या किसी भी प्रकार के blog को mobile पर देखना ज्यादा पसंद करता है. कुछ सालों पहले हम website को केवल desktop तथा laptop size के लिए बनाते थे लेकिन नए smartphone तथा tablet आने के कारण हमें website को mobile, tablet, laptop तथा desktop के लिए बनाना जरुरी हो गया है.

जिसे हम responsive web design कहते है website को responsive बनाने के लिए हम html और CSS का इस्तेमाल करते है responsive website का meaning किसी design को अलग-अलग size जैसे mobile, tab, laptop तथा desktop के लिए बनाना है.

Responsive web design क्या है
Responsive web design क्या है

Responsive website बनाए – Create a responsive web design with grid – responsive website in hindi

html से हमे website को responsive बनाने के लिए html में <head> tag के अंदर tag का link देना जरुरी होता है जो हमारी website को responsive बनाने में मदद करता है.

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

इसमें width=device-width अलग-अलग screen पर design की width को set करता है तथा initial-scale-1 अलग-अलग size पर page को zoom करने पर page को manage करता है.

1) bootstrap से हम responsive website बनाने के लिए html में row और column का इस्तेमाल करते है जिसमे हम एक 1 row और 12 column का इस्तेमाल करते है जिससे हम बिना CSS code लिखे responsive website बना सकते है. अगर हमें row, column के द्वारा website बनाना है तो हमें row के अंदर 12 column को पूरा करना अनिवार्य होता है.

जिससे हम हर column के अंदर कुछ ना कुछ जैसे – image, video, text आदि चीज़ को रखना होता है अगर हमारे पास एक image या text है left side से 6 column में हम image रखेंगे तथा right side के 6 column में हम text रखेंगे.

2) अगर हमारे पास 4 column के बराबर image है और बचे 4 column के बराबर text है तो हम पहले 4 column में image रखेंगे तथा बाकि बचे 8 column में हम text रखेंगे.

3) हमारे पास अगर पहले 1 column के बराबर text है बाकि बचे 11 column में image रखेंगे.

इसी तरह हमें image, text तथा video को column में रखकर 12 column को पूरा करना होता है जिसमें हम किसी भी column में अपनी आवश्यकतानुसार कुछ भी रख सकते है तथा 12 column को हम कितने भी column में बाँट सकते है.

हमारे पास अगर पहले 3 column में image है तथा बाकि बचे 9 column में कुछ नहीं है तो हमें कुछ ना कुछ रखना अनिवार्य होता है जिससे की हमारा 12 column पूरा हो.

Responsive website size और responsive web design क्या है

HTML द्वारा responsive website बनाने के लिए हम 5 प्रकार के size का इस्तेमाल करते है. जिससे हम xs, sm, md, lg तथा xl का इस्तेमाल करते है जिसे हमें row के अंदर col के साथ इस्तेमाल करना होता है.

1) responsive web design में xs क्या है

xs का मतलब होता है extra small यानि कि 320 size से 575 size तक xs का इस्तेमाल किया जाता है इसका इस्तेमाल mobile phone का size responsive करने के लिए किया जाता है xs को हमेशा 12 column के साथ इस्तेमाल किया जाता है.

2) sm क्या है

sm का मतलब होता है small यानि कि 575px से 767px size तक sm का इस्तेमाल किया जाता है इसका इस्तेमाल भी mobile phone का landscape size responsive करने के लिए किया जाता है. इसे भी हमेशा 12 column के साथ इस्तेमाल किया जाता है.

3) md क्या है

medium size के लिए md का इस्तेमाल करते है यानि कि 768px से 992px size तक इसका इस्तेमाल किया जाता है. इसका इस्तेमाल tab यानि कि tablet को responsive करने के लिए 12 column के साथ इस्तेमाल किया जाता है.

4) lg क्या है

large size के लिए lg का इस्तेमाल करते है यानि कि 992x से 1199px size तक इसका इस्तेमाल किया जाता है. इसका इस्तेमाल tablet तथा laptop को responsive करने के लिए 12 column के साथ इस्तेमाल किया जाता है.

4) xl क्या है

extra large size के लिए xl का इस्तेमाल किया जाता है 1200px से बड़ी size कि जितनी भी screen है जैसे laptop, desktop आदि के लिए xl का इस्तेमाल 12 column में रखकर किया जाता है जाता है.

हम एक साथ सभी size का इस्तेमाल कर सकते है जिसमें हमें xl size को 3 column में lg size को 12 column में md size को 3 column में sm size को 6 column में तथा xs size को 3 column में दिखा सकते है जिसके बाद हमारा design किसी भी size में responsive दिखेगा.

पूरा website responsive बनाने के लिए responsive website के code को दर्शाया गया है जिससे हमारा text छोटे बड़े सभी size में responsive दिखेगा.

responsive web design क्या है कैसे बनाए और responsive size के बारे में सरल तरीके से बताया गया है अगर size से सम्बंधित कोई सवाल हो आप नीचे पूछ सकते है और अधिक जानकारी के लिए आप w3school की website पर जाकर पढ़ सकते है.

jeewan.basera@gmail.comhttps://hindischool.net
Jeewan, मै hindischool.net का foundur हूँ मै एक professional web designer और graphic designer हूँ मुझे इस क्षेत्र में 4 साल का अनुभव है और यहाँ में अपने अनुभव को blog के जरिये लोगों के साथ शेयर करता हूँ मुझे हिंदी मै blog लिखना पसंद है, graphic और website से संबंधित किसी भी प्रकार की सहायता के लिए आप social media या comment के जरिए अपने सवाल पूछ सकते है.

Related Articles

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Stay Connected

21,570FansLike
3,432FollowersFollow
0SubscribersSubscribe

Latest Articles