जवाबों:
यह एक मीडिया क्वेरी है। यह तब तक सीएसएस को अंदर चलने से रोकता है जब तक कि ब्राउज़र इसमें शामिल परीक्षणों को पारित नहीं करता है।
इस मीडिया क्वेरी में परीक्षण हैं:
@media screen- ब्राउज़र खुद को "स्क्रीन" श्रेणी में होने के रूप में पहचानता है। यह मोटे तौर पर इसका मतलब ब्राउज़र ही मानता है डेस्कटॉप श्रेणी - के रूप में एक जैसे के लिए विरोध पुराने मोबाइल फोन ब्राउज़र (ध्यान दें कि iPhone, और अन्य स्मार्टफोन ब्राउज़रों, है खुद को स्क्रीन श्रेणी में होने के रूप में पहचान), या एक स्क्रीनरीडर - और यह प्रदर्शित किया है कि पृष्ठ को ऑन-स्क्रीन, प्रिंट करने के बजाय।
max-width: 1024px- ब्राउज़र विंडो की चौड़ाई (स्क्रॉल बार सहित) 1024 पिक्सेल या उससे कम है। ( सीएसएस पिक्सल, डिवाइस पिक्सल नहीं ।)
यह दूसरा परीक्षण बताता है कि यह सीएसएस को iPad, iPhone और इसी तरह के उपकरणों तक सीमित करने का इरादा है (क्योंकि कुछ पुराने ब्राउज़र max-widthमीडिया प्रश्नों में समर्थन नहीं करते हैं , और बहुत सारे डेस्कटॉप ब्राउज़र 1024 पिक्सेल से अधिक व्यापक हैं)।
हालाँकि, यह max-widthमीडिया ब्राउजर को सपोर्ट करने वाले ब्राउजर्स में 1024 पिक्सल से कम चौड़ी डेस्कटॉप विंडो पर भी लागू होगा ।
यहां मीडिया क्वैरिज़ स्पेक है, यह बहुत पठनीय है:
यह वहां परिभाषित शैलियों को स्क्रीन तक सीमित कर रहा है (जैसे प्रिंट या कुछ अन्य मीडिया नहीं) और आगे व्यूपोर्ट के दायरे को सीमित कर रहा है जो 1024px या उससे कम चौड़ाई में हैं।
यह कहता है: जब पृष्ठ चौड़ाई में अधिकतम 1024 पिक्सेल के रिज़ॉल्यूशन पर स्क्रीन पर प्रस्तुत करता है, तो उस नियम को लागू करें जो पालन करता है।
जैसा कि आप पहले से ही जानते हैं कि आप कुछ सीएसएस को एक मीडिया प्रकार को लक्षित कर सकते हैं जो हाथ, स्क्रीन, प्रिंटर और इतने पर हो सकता है।
मेरे मामले में मैं अपने लोगो को एक वेबसाइट पर केंद्रित करना चाहता था जब ब्राउज़र 800pxकम या ज्यादा होता है, तो मैंने @mediaटैग का उपयोग करके ऐसा किया :
@media screen and (max-width: 800px) {
#logo {
float: none;
margin: 0;
text-align: center;
display: block;
width: auto;
}
}इसने मेरे लिए काम किया, आशा है कि किसी को यह समाधान उपयोगी लगेगा। :) अधिक जानकारी के लिए इसे देखें ।
वह मीडिया क्वेरी है । यह आपको केवल विशिष्ट विन्यास पर विशिष्ट उपकरणों के लिए सीएसएस नियमों का हिस्सा लागू करने की अनुमति देता है।
इसका मतलब है कि यदि स्क्रीन का आकार 1024 है तो केवल सीएसएस नियमों के नीचे लागू करें।
यदि आपकी मीडिया क्वेरी की स्थिति सही है, तो उस स्थिति के साथ आपका सीएसएस काम करेगा। इसका मतलब है कि आपके मीडिया क्वेरी की स्थिति पिक्सेल आकार के भीतर सीएसएस असर करेगा, या फिर अगर स्थिति विफल हो जाएगी, तो इसका मतलब है कि अगर डिवाइस की चौड़ाई 1024px से अधिक है तो आपके सीएसएस काम नहीं करेगा। क्योंकि आपकी मीडिया क्वेरी की स्थिति झूठी है।
max-width उस चौड़ाई तक आपकी अधिकतम सीएसएस सीमा है।
यह भी ध्यान देने योग्य है कि आप 'em' के साथ-साथ 'px' का उपयोग कर सकते हैं - ब्लॉग और पाठ आधारित साइटें ऐसा इसलिए करती हैं क्योंकि तब ब्राउज़र पाठ सामग्री के सापेक्ष लेआउट निर्णय लेता है।
Wordpress पर Twentysixteen मैं चाहता था कि मेरी टैगलाइन मोबाइलों के साथ-साथ डेस्कटॉप पर भी प्रदर्शित हो, इसलिए मैंने इसे अपनी बाल विषय शैली में रखा।
@media screen and (max-width:59em){
p.site-description {
display: block;
}
}यह कुछ अन्य कोड को निष्पादित करने के लिए कुछ निर्दिष्ट सुविधा को लक्षित करता है ...
उदाहरण के लिए:
@media all and (max-width: 600px) {
.navigation {
-webkit-flex-flow: column wrap;
flex-flow: column wrap;
padding: 0;
}उपरोक्त स्निपेट का कहना है कि यदि इस प्रोग्राम को चलाने वाले डिवाइस में 600px या 600px से कम चौड़ाई वाली स्क्रीन है, तो इस स्थिति में हमारे प्रोग्राम को इस हिस्से को निष्पादित करना होगा।