इसका मतलब क्या है @media केवल स्क्रीन और (मिनी-डिवाइस-चौड़ाई: 320 पीएक्स) और (अधिकतम-डिवाइस-चौड़ाई: 480 पीएक्स)

Question

वर्डप्रेस बीस ग्यारह थीम की सीएसएस फ़ाइल में इसका क्या अर्थ है।

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) 

Answer 1

यह CSS3 Media Queries कहा जाता है जो अपनी वेबसाइट स्क्रीन आयाम के विभिन्न के लिए अनुकूल या मूल रूप से, यह अलग-अलग डिवाइस विभिन्न शैलियों वितरित करने के लिए मदद करता है मदद करने के लिए एक तकनीक है।

के बाद से आप नए हैं, के दो भागों के लिए अपने मीडिया क्वेरी को तोड़ने करते हैं:

@media only screen 

इसका मतलब यह है कि हम एक स्क्रीन के साथ एक डिवाइस के लिए सीएसएस शैलियों लागू होगी। कीवर्ड only फ़ोन स्टाइल शीट देखने से पुराने ब्राउज़र से स्टाइल शीट छुपाने के लिए यहां उपयोग किया जाता है।

and (min-device-width: 320px) and (max-device-width: 480px) 

यह काफी स्पष्ट है के बाद से इसका मतलब है कि निर्दिष्ट सीएसएस केवल किसी डिवाइस को न्यूनतम 320px के साथ एक स्क्रीन के आकार और चौड़ाई आयाम में 480px की अधिकतम है लागू किया है।

Answer 2

मीडिया प्रश्न विनिर्देश केवल कीवर्ड प्रदान करता है, जिसका उद्देश्य पुराने ब्राउज़र से मीडिया प्रश्नों को छिपाना है। पसंद नहीं है, कीवर्ड घोषणा की शुरुआत में आना चाहिए। उदाहरण के लिए:

media="only screen and (min-width: 401px) and (max-width: 600px)" 

जो ब्राउज़र को पहचान नहीं पा मीडिया क्वेरी मीडिया प्रकार की एक अल्पविराम से अलग किए उम्मीद करते हैं, और विनिर्देश कहते हैं कि वे पहले nonalphanumeric चरित्र है कि एक हाइफन नहीं है से ठीक पहले प्रत्येक मान काटना चाहिए।

media="only" 

उदाहरण एक-एक करके

@media (max-width:632px) 

कि आप लागू करना चाहते 632px की एक अधिकतम-चौड़ाई के साथ एक खिड़की के लिए यह एक कह रहा है: तो, एक पुराने ब्राउज़र इस रूप में पूर्ववर्ती उदाहरण से समझना चाहिए इन शैलियों। उस आकार में आप ज्यादातर मामलों में डेस्कटॉप स्क्रीन से कम किसी भी चीज़ के बारे में बात करेंगे।

@media screen and (max-width:632px) 

यह एक एक स्क्रीन के साथ एक डिवाइस और 632px शैली लागू की अधिकतम-चौड़ाई के साथ एक खिड़की के लिए कह रहा है। यह उपर्युक्त के लगभग समान है, सिवाय इसके कि आप अन्य उपलब्ध मीडिया प्रकारों के विरोध में स्क्रीन निर्दिष्ट कर रहे हैं, जो कि आम तौर पर प्रिंट किए जा रहे हैं।

छोटे स्क्रीन के साथ कई स्मार्टफोनों के लिए शैली के लिए

, आप लिख सकते हैं:

@media screen and (max-width:480px) { … } 

एक iPhone या Android फ़ोन शैली पत्रक देखने से पुराने ब्राउज़र को ब्लॉक करने के लिए, आप लिख सकते हैं:

@media only screen and (max-width: 480px;) { … } 

Answer 3

लेट्स चरण-दर-चरण चरण के अर्थ को समझें:

आप कोड था:

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) 

@media नियम विभिन्न मीडिया प्रकारों/उपकरणों के लिए विभिन्न शैली नियमों को परिभाषित करने के लिए उपयोग किया जाता है।

केवल कीवर्ड पुराने ब्राउज़र को रोकता है जो मीडिया सुविधाओं के साथ दिए गए शैलियों को लागू करने से मीडिया प्रश्नों का समर्थन नहीं करते हैं। इसका आधुनिक ब्राउज़र पर कोई प्रभाव नहीं पड़ता है।

एक स्क्रीन और जिसका न्यूनतम और अधिकतम चौड़ाई में जाना जाता है के साथ उपकरणों के लिए शैलियों को सीमित करने के लिए, आप स्क्रीन मीडिया प्रकार के मीडिया सुविधाओं श्रृंखला कर सकते हैं:

screen and (min-device-width: 320px) and (max-device-width: 480px) 

आगे मार्गदर्शन के लिए आप MDN website by clicking here जाँच कर सकते हैं