न्यूनतम चौडाइ र अधिकतम-चौडाइ मिडिया प्रश्नहरूको लागि सिन्ट्याक्स
उत्तरदायी वेब डिजाइन वेबपेजहरू निर्माण गर्ने एउटा दृष्टिकोण हो जहाँ ती पृष्ठले आगन्तुकको स्क्रिन आकारको आधारमा गतिशील रूपमा आफ्नो लेआउट र उपस्थिति परिवर्तन गर्न सक्छ। ठूला स्क्रिनहरूले ती ठूला डिस्प्लेहरूमा अनुकूल एक लेआउट प्राप्त गर्न सक्दछ जबकि साना यन्त्रहरू जस्तै मोबाईल फोनहरू, जस्तै कि सानो स्क्रिनको लागि उपयुक्त रूपमा ढाँचाबद्ध वेबसाइटमा प्राप्त गर्न सक्दछ। यो दृष्टिकोणले सबै प्रयोगकर्ताहरूको लागि उत्तम प्रयोगकर्ता अनुभव प्रदान गर्दछ र यसले खोजी इन्जिन रेटिङ सुधार गर्न पनि सक्दछ। उत्तरदायी वेब डिजाइन को एक महत्वपूर्ण भाग CSS Media प्रश्नहरु हो।
मिडिया क्वेरिरीहरू तपाईको वेबसाइटको सीएसएस फाइल भित्र साना सशर्त बयानहरू जस्ता छन्, तपाईले निश्चित सीएसएस नियमहरू सेट गर्न अनुमति दिन्छ जुन एक निश्चित शर्त भेट्टाइने बेला मात्र प्रभाव पार्नेछ - जस्तै स्क्रिनको आकार निश्चित थ्रेसहोल्ड भन्दा माथि वा तल छ।
एक्शनमा मिडिया प्रश्नहरू
त्यसैले तपाइँ कसरी वेबसाइटमा मिडिया प्रश्नहरू प्रयोग गर्नुहुन्छ? यहाँ एक सरल उदाहरण हो:
- तपाईं कुनै राम्रो दृश्य शैली HTML बाट कुनै पनि भिडीयो शैलीबाट सुरु हुनुहुनेछ (यो के हो एसएसएसका लागि होईन)
- तपाईंको सीएसएस फाइलमा, तपाईंले सामान्य रूपमा पृष्ठलाई स्टाइल गरेर शुरू गर्नुहुनेछ र वेबसाइट कसरी हेर्ने भनेर आधारभूत सेटअप गर्न सक्नुहुन्छ। तपाइँलाई पृष्ठको फन्ट साइज 16 पिक्सेलको हुन चाहानुहुन्छ, तपाई यो CSS लाई लेख्न सक्नुहुन्छ: शरीर {फन्ट-साइज: 16px; }
- अब तपाई ठूलो ठूला स्क्रिनका लागि फन्ट साइज बढाउन चाहानुहुन्छ जुन अचल सम्पत्ति छ त्यसो गर्न। यो जहाँ त्यहाँ मिडिया क्वेरीहरू किकमा छन्। तपाईं यससँग मिडिया क्वेरी सुरु गर्नुहुन्छ: @media स्क्रिन र (min-width: 1000px) {}
- यो मिडिया क्वेरीको सिन्ट्याक्स हो। यो @media मार्फत मिडिया क्वेरी स्थापना गर्न सुरु हुन्छ। अर्को तपाईंले "मिडिया प्रकार" सेट गर्नुभयो, जुन यस अवस्थामा "स्क्रिन" हो। यो डेस्कटप कम्प्यूटर स्क्रिन, ट्याब्लेट्स, फोन र आदि मा लागू हुन्छ। अन्तमा, तपाईं मीडिया क्वेरी को "मीडिया सुविधा" को साथ समाप्त गर्छन। हाम्रो उदाहरण माथि, त्यो "मध्य चौडाई: 1000px" हो। यसको मतलब यो हो कि मिडिया क्वेरी अधिकतम चौडाई 1000 पिक्सल चौडाई को साथ डिस्प्ले को लागी किक हुनेछ।
- मिडिया क्वेरीका यी तत्त्वहरू पछि, तपाईंले कुनै पनि सामान्य CSS नियममा के गर्नुहुनेछ जस्तो एक खुल्ला र बन्द घुमाउरो घुमाउरो जोड्छ।
- मिडिया क्वेरीमा अन्तिम चरण यो शर्त भेट्टाए पछि तपाईले लागू गर्न चाहानु भएको CSS नियम थप्न हो। तपाइँले यी भिडियो नियमहरू घुम्ने ब्रेकसहरू बीच मिडिया बनाएर बनाउनुहुन्छ, जस्तै यो: @media स्क्रिन र (min-width: 1000px) {body {font-size: 20px; }
- जब मिडिया क्वेरीको सर्तहरू भेटिन्छ (ब्राउजर सञ्झ्याल कम्तिमा 1000 पिक्सेलको चौडाई छ), यो सीएसएस स्टाइलले प्रभाव पार्नेछ, हाम्रो साइटको फन्ट साइजलाई 16 पिक्सेलबाट तपाईले 20 पिक्सेलमा हाम्रो नयाँ मानमा स्थापना गर्नुभयो।
थप शैलीहरू थप्दै
तपाईं यस मिडिया भित्र धेरै सीएसएस नियमहरू राख्न सक्नुहुनेछ क्वेरी तपाईको वेबसाइटको दृश्य रूप समायोजन गर्न आवश्यक छ। उदाहरणका लागि, यदि तपाईं 20 पिक्सेलमा मात्र फन्ट साइज बढाउन चाहानुहुन्छ, तर ब्ल्याकमा सबै अनुच्छेदहरूको रंग परिवर्तन गर्नुहोस् (# 000000), तपाई यो थप्न सक्नुहुन्छ:
@media स्क्रिन र (मिनेट-चौडाई: 1000px) {शरीर {फन्ट-साइज: 20px; } p {रंग: # 000000; }}थप मिडिया प्रश्नहरू थप्दै
थप रूपमा, तपाईं प्रत्येक ठूलो आकारका लागि थप मिडिया प्रश्नहरू थप्न सक्नुहुन्छ, र तिनीहरूलाई तपाइँको शैली पानामा थप्दै:
@media स्क्रिन र (मिनेट-चौडाई: 1000px) {शरीर {फन्ट-साइज: 20px; } p {रंग: # 000000; {} @media स्क्रीन र (मिनेट चौडाई: 1400px) {शरीर {फन्ट-साइज: 24px; }}पहिलो मिडिया क्वेरीहरू 1000 पिक्सल चौडाईमा किक हुनेछन्, फन्ट साइजलाई 20 पिक्सलमा बदल्नुहोस्। त्यसपछि, ब्राउजर एक पटक 1400 पिक्सल भन्दा माथि थियो, फन्ट आकार फेरि 24 पिक्सेलमा परिवर्तन हुनेछ। तपाईंले आफ्नो विशेष वेबसाइटको लागि आवश्यक रूपमा धेरै मिडिया प्रश्नहरू थप्न सक्नुहुनेछ।
न्यूनतम चौडाई र अधिकतम चौडाइ
सामान्यतया मीडिया प्रश्नहरू लेख्न दुई तरिकाहरू छन् - "min-width" वा "अधिकतम-चौडाइ" प्रयोग गरी। अहिले सम्म, हामीले "मिन चौडाइ" कार्यमा देख्यौं। यसले ब्राउजर क्वेरीहरू कम्तिमा कम्तीमा कि न्यूनतम चौडाइसम्म पुगेपछि एक पटक प्रभाव पार्छ। त्यसैले क्वेरीले "min-width: 1000px" को प्रयोग गर्दछ जब ब्राउजर कम्तिमा 1000 पिक्सल चौडाई हुन्छ। जब तपाईं "मोबाइल-पहिलो" तरिकामा साइट निर्माण गर्दै हुनुहुन्छ भने मिडिया क्वेरीको यो शैली प्रयोग गरिन्छ।
यदि तपाईं "अधिकतम-चौडाइ" प्रयोग गर्नुहुन्छ भने, यो विपरीत तरिकामा काम गर्दछ। ब्राउजरले यो साइज तल पसेपछि "अधिकतम-चौडाइ: 1000px" को एक क्वेरी लागू हुनेछ।
पुरानो ब्राउजरको बारेमा
मिडिया प्रश्नहरूसँग एक चुनौती इन्टरनेट एक्सप्लोररमा पुरानो संस्करणहरूमा समर्थनको कमी छ। धन्यवाद, त्यहाँ polyfills उपलब्ध छन् जुन ती पुरानो ब्राउजरहरूको मिडिया क्वेरीहरूको लागि समर्थन पैच गर्न सक्दछ, तपाईले आज उनीहरूलाई वेबसाइटहरूमा प्रयोग गर्ने अनुमति दिँदै अनुमति दिईएको छ जबसम्म अझै पनि कि साइटको प्रदर्शन पुरानो ब्राउजर सफ्टवेयरमा बिर्सिएको छैन।
1/24/17 मा जेरेमी गिरर्ड द्वारा सम्पादित