Google search engine

CSS media query क्या है और CSS media query mobile हिंदी में

CSS media query in hindi

क्या अपने कभी ध्यान दिया है जब हम किसी website को desktop या बड़ी screen में देखते है वह अलग laptop में अलग, tab तथा mobile में अलग दिखाई देता है ऐसा क्यों होता है. अगर केवल laptop या बड़े size के लिए website बनाए mobile में खोलने पर उसका design हमे सही नहीं दिखेगा उसमें font, image, text बड़े size में तथा design बिखरा हुआ दिखेगा इस चीज़ को सही करने के लिए हम CSS media query का इस्तेमाल करते है.
CSS media query का इस्तेमाल responsive design बनाने के लिए किया जाता है.

Responsive design क्या है – what is responsive design

किसी भी webpage को हम अलग-अलग devices जैसे – mobile, tab, laptop तथा desktop में खोलते है तो सभी screen में design सही तरीके से खुलता है उसे हम responsive design कहते है. इसके लिए सबसे पहले हमें html में <head> tag के अंदर <meta> link add करना पड़ता है जो website को responsive करने में मदद करता है.

responsive design का मतलब किसी भी design को सभी size के लिए बनाना है यानि कि किसी भी size में खोलने पर वह सही दिखे पूरी जानकरी के लिए responsive design क्या है यहाँ से पढ़ सकते है.

media query सीखने के लिए सबसे पहले हमें Html और CSS की जानकारी होनी चाहिए जिसके बाद हम सभी device के लिए media query सीख सकते है media query को हम 4 size के लिए इस्तेमाल करते है.

  1. Mobile के लिए (320px से 551px)
  2. Tab के लिए (552px से 1024px)
  3. Laptop के लिए (1280px से 1440px)
  4. Desktop के लिए (1441px से बड़े screen के लिए)

media query min और max width – CSS media query min and max

min-width का मतलब होता है सबसे कम width तथा max-width का मतलब होता है सबसे ज्यादा width यानि की उससे ज्यादा width नहीं min और max दोनों का इस्तेमाल CSS media query में हर size के लिए किया जाता है. ज्यादातर mobile का size 320px से 551px तक होता है इस size के लिए हम जो भी media query लिखेंगे वह 320px से 551px तक same size रहेगा जिसमें font, color, image आदि चीज़ें same रहेगी.

CSS media query for mobile

जो भी mobile हम इस्तेमाल करते है हर किसी का size अलग-अलग होता है mobile का जो सबसे कम size होता है वह 320px और जो सबसे ज्यादा size 551px तक होता है. इसलिए हम CSS में सभी mobile के लिए एक साथ media query लिख सकते है. जिसमें हम min-width 320px और max-width 551px इस्तेमाल करते है जैसे –

@media only screen and (min-width: 320px) and (max-width: 551px)
  • @media का मतलब अलग-अलग device के लिए इस्तेमाल किया जाता है.
  • only screen का मतलब केवल mobile size के लिए यानि कि केवल mobile size device के लिए media query.

मान लीजिये हम laptop या desktop में design बना रहे है और h1 tag कि CSS लिखी है और उसका font-size: 30px; दिया है. अगर हम इस webpage को mobile में खोलें तो उसका font-size बहुत बड़ा दिखाई देगा mobile में font का size कम करने के लिए हम media query लिखेंगे –

इसमें font के अलावा हम image size, box-size, color, background-color, border, margin, padding, position आदि चीज़ो को mobile size के लिए बदल सकते है अगर आप कोई media query नहीं लिखते है जो अपने CSS लिखी है वह हर size पर लागू होगा.

Tablet के लिए

जो भी table हम इस्तेमाल करते है हर किसी का size अलग होता है सामान्य रूप से हम 3 प्रकार के size ipad min, ipad और ipad pro size के लिए media query लिखते है जिनका size 768px से लेकर 1024px तक होता है यानि कि tablet इस size में होते है जिसमें हम सब के लिए एक ही size का CSS लिखते है जो केवल tab के लिए कम करेगा.

ऊपर हमने CSS में font-size: 30px; और color: black; रखा है जो tablet के लिए font-size: 22px; और color: grey; रख दिया है जिसके बाद हमें दोनों में अलग size और color दिखेगा. और अधिक जानकारी के लिए w3school में जाकर media query के बारे में सीख सकते है.

Media query for laptop and desktop

आजकल हर office, घर तथा हर आदमी के पास अपना personal laptop रहता है और हर laptop अलग-अलग कंपनी के होते है जिनका size बड़ा और छोटा रहता है जैसे – Dell, Lenovo, Mackbook, Hp आदि 1280px से 1440px तक की size के laptop होते है यहाँ भी हम सभी size के laptop के लिए एक media query लिखते है.

यहाँ पर हमने CSS में h1 का font-size: 30px; और background-color: white; रखा है लेकिन laptop में हम इसके देखते है तो वहाँ पर केवल laptop वाली media query काम करेगी.

Media query for desktop and all devices :-

सभी size के लिए media query लिखने के बाद हम desktop के लिए और बड़े size के लिए media query लिखते है desktop का size कितना भी हो सकता है सबसे कम 1024px या किसी भी size में हो सकता है लेकिन बड़ा size हमें screen के हिसाब से रख सकते है जैसे कोई 1600px का desktop हो तो हमें max-width 1600px रख देंगे जैसे –

लेकिन अगर हमें desktop का size पता नहीं है हम उसके केवल min-width रख देंगे जिसके बाद कितना भी बड़ा size हो वही काम करेगा जो अपने media query लिखी है इस तरह हम किसी भी size की media query लिख सकते है. जैसे हमने 500px से 700px के बीच design सही करना है तो हम min और max width देकर लिख सकते है जैसे –

Note: – अगर हमारा design mobile, laptop, tab तथा desktop में सही दिख रहा है तो हमें कोई media query लिखने की जरुरत नहीं होती है media query में ज्यादा इस्तेमाल font-size, margin padding बदलने का होता है.

अब आपको पूरी तरह पता चल गया होगा कि CSS media query क्या है, mobile, tab, laptop तथा desktop के लिए media query को कैसे लिखना है min-width और max-width क्या है कैसे हम अपने computer पर mobile view और अन्य size को देख सकते है मुझे उम्मीद है आपको ये post पसंद आई होगी अगर responsive से संबंधित कोई आपका सवाल हो आप नीचे comment box में पूछे.

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