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