फाउंडेशन - मीडिया क्वेरी

मीडिया क्वेरी CSS3 मॉड्यूल हैं जिसमें चौड़ाई, ऊँचाई, रंग जैसी मीडिया सुविधाएँ शामिल हैं और निर्दिष्ट स्क्रीन रिज़ॉल्यूशन के अनुसार सामग्री प्रदर्शित करती हैं।

ब्रेकडाउन रेंज बनाने के लिए फाउंडेशन निम्नलिखित मीडिया प्रश्नों का उपयोग करता है -

• Small - किसी भी स्क्रीन के लिए इस्तेमाल किया।

• Medium - इसका उपयोग 640 पिक्सल की स्क्रीन और व्यापक के लिए किया जाता है।

• Large - इसका उपयोग 1024 पिक्सल और व्यापक स्क्रीन के लिए किया जाता है।

आप ब्रेकपॉइंट कक्षाओं का उपयोग करके स्क्रीन का आकार बदल सकते हैं । उदाहरण के लिए, आप छोटे आकार के स्क्रीन के लिए .small-6 वर्ग और मध्यम आकार के स्क्रीन के लिए .medium-4 वर्ग का उपयोग कर सकते हैं जैसा कि निम्नलिखित कोड स्निपेट में दिखाया गया है -

<div class = "row">
   <div class = "small-6 medium-4 columns"></div>
   <div class = "small-6 medium-8 columns"></div>
</div>

ब्रेकपॉइंट बदलना

यदि आपका एप्लिकेशन फाउंडेशन के SASS संस्करण का उपयोग करता है, तो आप ब्रेकप्वाइंट बदल सकते हैं। आप ब्रेकपॉइंट्स नाम को नीचे दी गई सेटिंग फ़ाइल में $ ब्रेकप्वाइंट चर के तहत रख सकते हैं -

$breakpoints: (
   small: 0px,
   medium: 640px,
   large: 1024px,
   xlarge: 1200px,
   xxlarge: 1440px,
);

आप $ breakpoint- वर्ग चर को संशोधित करके सेटिंग्स फ़ाइल में ब्रेकपॉइंट कक्षाएं बदल सकते हैं । यदि आप CSS में .large वर्ग का उपयोग करना चाहते हैं , तो इसे नीचे दिखाए अनुसार सूची के अंत में जोड़ें -

$breakpoints-classes: (small medium large);

मान लीजिए, आप CSS में .xlarge वर्ग का उपयोग करना चाहते हैं , और फिर इस वर्ग को सूची के अंत में जोड़ें जैसे कि नीचे दिखाया गया है -

$breakpoints-classes: (small medium large xlarge);

एस.ए.एस.एस.

ब्रेकपॉइंट मिक्सिन

• आप @include के साथ ब्रेकपॉइंट () मिश्रण का उपयोग करके मीडिया के प्रश्नों को लिख सकते हैं ।

• निम्नलिखित कोड प्रारूप में दिखाए गए अनुसार मीडिया क्वेरी के व्यवहार को बदलने के लिए ब्रेकपॉइंट मान के साथ नीचे या केवल कीवर्ड का उपयोग करें -

.class_name {
   // code for medium screens and smaller
   @include breakpoint(medium down) { }
   
   // code for medium screens only
   @include breakpoint(medium only) { }
}

आप डिवाइस अभिविन्यास या पिक्सेल घनत्व के लिए तीन मीडिया क्वेरीज़ पोर्ट्रेट , लैंडस्केप और रेटिना का उपयोग कर सकते हैं और वे चौड़ाई आधारित मीडिया क्वेरी नहीं हैं।

विराम बिंदु

• आप आंतरिक फ़ंक्शन का उपयोग करके ब्रेकपॉइंट () मिश्रण की कार्यक्षमता का उपयोग कर सकते हैं ।

• ब्रेकपाइंट () कार्यक्षमता सीधे इस्तेमाल किया जा सकता खुद मीडिया के प्रश्नों लिखने के लिए -

@media screen and #{breakpoint(medium)} {
   // code for medium screens and up styles
}

जावास्क्रिप्ट

मीडिया क्वेरी के साथ काम करना

• फाउंडेशन जावास्क्रिप्ट नीचे दिए गए अनुसार निर्दिष्ट रूप से Foundation.MediaQuery वस्तु पर वर्तमान ब्रेकपॉइंट नाम तक पहुंचने के लिए MediaQuery.current फ़ंक्शन प्रदान करता है -

Foundation.MediaQuery.current

• MediaQuery.current समारोह को प्रदर्शित करता है छोटा सा , मध्यम , बड़े वर्तमान ब्रेकप्वाइंट नामों के रूप में।

• आप नीचे दिखाए गए अनुसार MediaQuery.get फ़ंक्शन का उपयोग करके ब्रेकपॉइंट की मीडिया क्वेरी प्राप्त कर सकते हैं -

Foundation.MediaQuery.get('small')

सैस संदर्भ

चर

निम्न तालिका एसएएस चर को सूचीबद्ध करती है, जिसका उपयोग घटक की डिफ़ॉल्ट शैलियों को अनुकूलित करने के लिए किया जा सकता है -

अनु क्रमांक।	नाम और विवरण	प्रकार	डिफ़ॉल्ट मान
1	$breakpoints यह एक ब्रेकपॉइंट नाम है जिसे ब्रेकपॉइंट () मिक्सकिन का उपयोग करके मीडिया के प्रश्नों को लिखने के लिए इस्तेमाल किया जा सकता है ।	नक्शा	छोटा: 0px माध्यम: 640 पीएक्स बड़ा: 1024px xlarge: 1200px xxlarge: 1440px
2	$breakpoint-classes आप $ ब्रेकपॉइंट-वर्ग चर को संशोधित करके सीएसएस वर्ग आउटपुट को बदल सकते हैं ।	सूची	छोटा मध्यम बड़ा

mixins

फ़ाउंडेशन, घटकों के लिए अपनी CSS श्रेणी की संरचना बनाने के लिए शैलियों का एक समूह बनाता है।

BREAKPOINT

यह मीडिया क्वेश्चन बनाने के लिए ब्रेकप्वाइंट () मिक्सचिन का उपयोग करता है और इसमें निम्नलिखित गतिविधियाँ शामिल हैं -

• यदि स्ट्रिंग पास हो जाती है, तो मिक्सिन $ ब्रेकप्वाइंट मैप में स्ट्रिंग को खोजता है और मीडिया क्वेरी बनाता है।

• यदि आप पिक्सेल मूल्य का उपयोग कर रहे हैं, तो इसे $ रेम-बेस का उपयोग करके एम मूल्य पर परिवर्तित करें ।

• यदि रेम मान पारित किया जाता है, तो यह अपनी इकाई को एम में बदल देता है।

• यदि आप एम वैल्यू का उपयोग कर रहे हैं, तो इसका उपयोग किया जा सकता है।

निम्न तालिका ब्रेकपॉइंट द्वारा उपयोग किए जाने वाले पैरामीटर को निर्दिष्ट करती है -

अनु क्रमांक।	नाम और विवरण	प्रकार	डिफ़ॉल्ट मान
1	$value यह ब्रेकपॉइंट नाम, px, रेम या ईएम मानों का उपयोग करके मूल्यों को संसाधित करता है।	कीवर्ड या संख्या	कोई नहीं

कार्य

BREAKPOINT

यह मिलान इनपुट मान के साथ मीडिया क्वेरी बनाने के लिए ब्रेकपॉइंट () मिक्सिन का उपयोग करता है ।

निम्न तालिका ब्रेकपॉइंट द्वारा उपयोग किए जाने वाले संभावित इनपुट मान को निर्दिष्ट करती है -

अनु क्रमांक।	नाम और विवरण	प्रकार	डिफ़ॉल्ट मान
1	$val यह ब्रेकपॉइंट नाम, पीएक्स, रेम या एम मूल्यों का उपयोग करके मूल्यों को संसाधित करता है।	कीवर्ड या संख्या	छोटा

जावास्क्रिप्ट संदर्भ

कार्य

दो प्रकार के कार्य हैं -

• .atLeast- यह स्क्रीन को चेक करता है। यह विराम बिंदु के रूप में कम से कम चौड़ा होना चाहिए।

• .get - इसका उपयोग ब्रेकपॉइंट की मीडिया क्वेरी प्राप्त करने के लिए किया जाता है।

निम्न तालिका उपरोक्त कार्यों द्वारा प्रयुक्त पैरामीटर को निर्दिष्ट करती है -

अनु क्रमांक।	नाम और विवरण	प्रकार
1	size यह क्रमशः निर्दिष्ट कार्यों के लिए ब्रेकपॉइंट का नाम और जांचता है।	तार