सीएसएस मीडिया क्वेरी: कदम विवरण, सुविधाओं और समीक्षा द्वारा कदम

एक समय की बात है, जो वेबसाइट पर जाएँ स्मार्टफोन और इस जैसे मोबाइल उपकरणों, जिनके कारण अन्य केवल हँस करने के लिए। कई लोग बस नहीं समझ सकता है क्यों यह आवश्यक है, क्योंकि वहाँ इस तरह के एक आरामदायक डेस्कटॉप कंप्यूटर! या, पर सबसे बुरा, लैपटॉप। इसके अलावा, मोबाइल इंटरनेट तो महंगा था।

समय पारित कर दिया। इंटरनेट सस्ता हो गया। बिक्री अधिक से अधिक फोन और टेबलेट बाहर आया था। कुछ समय बाद, लोकप्रिय साइटों के मालिकों उसके सिर खरोंच हैरान। आंकड़ों के अनुसार, ऐसा लगता है कि अपने संसाधनों को और अधिक एक स्थिर पीसी के साथ की तुलना में अपने स्मार्टफोन का दौरा करने की संभावना है!

उस समय साइटों मोबाइल उपकरणों पर देखने के लिए अनुकूलित नहीं किया गया है। अपने फोन पर पुराने जीवन के लिए जा रहे हैं, तो आप छोटे अक्षरों, छोटे मेनू आइटम और असुविधाजनक बटन से ही संतोष करना होगा।

सीएसएस मीडिया के प्रश्नों के आगमन

संसाधनों लागू करने के लिए इतना है कि वे जब किसी भी स्क्रीन से देखी अच्छे लग की जरूरत थी। सबसे पहले प्रत्येक आकार के लिए अलग साइटों की स्थापना के अभ्यास फैल गया। उदाहरण के लिए, आगंतुकों को जो एक मोबाइल फोन का उपयोग, आप एक संसाधन है, और एक है कि आपके कंप्यूटर के साथ "बैठे" पर मिलता है - दूसरे पर। लेकिन यह एक लंबी, महंगी और असुविधाजनक था।

तब CSS3 के मीडिया के प्रश्नों आया था। उन लोगों के साथ गतिशील डिजाइन के कार्यान्वयन के मात्र संभावना आया था।

गतिशील डिजाइन क्या है?

यदि संसाधन की उपस्थिति स्क्रीन यह ब्राउज़ कर जिस पर के आकार के अनुसार बदलता है इस शब्द का प्रयोग किया जाता है। यह कैसे को समझने के लिए? यह आसान है।

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

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

समस्या CSS3 के मीडिया के प्रश्नों के साथ एक अनुकूली और मोबाइल डिजाइन का उपयोग करके हल किया जा सकता। मीडिया के प्रश्नों का उपयोग करके, हम सामग्री के स्थान को फिर से संगठित ... अब इसे इस तरह काम करता है:

• शीर्ष - ऊर्ध्वाधर नेविगेशन मेनू के साथ इकाई;
• इसके तहत - संपर्क है, जो अब भी खड़ी रखा जाता है के साथ ब्लॉक;
• साइडबार सामग्री <मुख्य> टैग सामग्री के पक्ष में प्रदर्शित नहीं किया जाता है, और यह ऊपर।

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

तो मीडिया क्वेरी क्या है?

понимают модуль CSS3, с помощью которого можно заставить контент страницы адаптироваться к определенным условиям. सीएसएस के तहत मीडिया के प्रश्नों CSS3 अवधि मॉड्यूल, जिसके साथ आप पृष्ठ की सामग्री कुछ शर्तों के अनुकूल करने के लिए कर सकते हैं समझते हैं। उदाहरण के लिए, यह स्क्रीन आकार, या अभिविन्यास डिवाइस (चित्र / परिदृश्य) पर प्रतिक्रिया के लिए शुरू होता है।

प्रणाली है कि सामग्री को बदलने के लिए जरूरत को समझता है के रूप में? यह मीडिया क्वेरी का उपयोग। वे कुछ मापदंडों को निर्दिष्ट करें। एक युक्ति है जहाँ से एक आगंतुक साइट पर आने वाले पूर्व पर्चे शैलियों सहित इन मानकों पर खरा उतरता है। वे या एक अलग फाइल में कुल सीएसएस तालिका के रूप में लिखा जा सकता है,।

सीएसएस मीडिया के प्रश्नों ब्राउज़र संगतता

Safari до Chrome. सभी आधुनिक ब्राउज़रों सफारी से Chrome में इस तकनीक का समर्थन,। Internet Explorer возникнут проблемы… Но давайте признаем честно – у тех, кто до сих пор пользуется старыми IE, буквально все может вызвать проблемы. बेशक, इंटरनेट एक्सप्लोरर के पुराने संस्करणों के उपयोगकर्ताओं के एक समस्या है ... लेकिन यह ईमानदारी से सामना करना पड़ता है करते हैं - जो लोग अभी भी पुरानी आईई उपयोग कर रहे हैं, बस कुछ के बारे में समस्याएं पैदा कर सकता।

सिंटेक्स अनुकूली लेआउट मीडिया के प्रश्नों

html. शायद आप जब एचटीएमएल करने के लिए शैली फ़ाइल जुड़े मीडिया के प्रश्नों के संपर्क में आए। उस लाइन याद रखें? Иногда в конец добавлялся еще один параметр, который выглядел так: media='screen'. = 'text / css' href = http: // साइट /article/320575/%E2%80%99style.css%E2%80%99%3E कभी कभी अंत में एक और पैरामीटर जोड़, जो के रूप में देखा: मीडिया = 'स्क्रीन'।

यह एक मीडिया क्वेरी है! उन्होंने कहा कि इंगित करता है कि निर्दिष्ट शैली फ़ाइल टीवी के साथ सुसज्जित उपकरणों पर काम करेंगे। screen можно указать print – в таком случае стили из файла применяются, если страница выводится на печать. इसके बजाय, आप स्क्रीन प्रिंट निर्दिष्ट कर सकते हैं - इस मामले में, फ़ाइल की शैलियों, लागू होते हैं, तो पेज प्रिंट होता है।

आप निम्न विशेषताओं का उपयोग कर सकते हैं:

• – универсальный вариант, используется по молчанию, применяется во всех случаях; सब - सार्वभौमिक संस्करण, चुप्पी के द्वारा प्रयोग किया, सभी मामलों में लागू किया जाता है;
• – экраны (компьютеры, ноутбуки, планшеты, смартфоны и все, что оснащено дисплеем); scrteen - स्क्रीन (कंप्यूटर, लैपटॉप, टैबलेट, स्मार्टफ़ोन, और जो कुछ एक प्रदर्शन के साथ सुसज्जित है);
• принтеры; प्रिंट - प्रिंटर;
• – проекторы; प्रक्षेपण - प्रोजेक्टर;
• – речевые браузеры; भाषण - भाषण ब्राउज़रों;
• – для устройств для слабовидящих; ब्रेल - नेत्रहीनों के लिए उपकरणों;
• – для экранов телевизоров. टीवी - टीवी स्क्रीन के लिए।

यही नहीं। , но они используются редко. कई अतिरिक्त सीएसएस मीडिया के प्रश्नों का श्रेय होते हैं, लेकिन वे शायद ही कभी इस्तेमाल किया जाता है। all. इसके अलावा, आप एक पैरामीटर निर्दिष्ट नहीं करते हैं - सब पर चूक।

मीडिया के प्रश्नों की संरचना

css. इसके बजाय एक शैली फ़ाइल बनाने के बजाय, आप कोड सीएसएस का उपयोग कर सकते हैं। यह इस तरह दिखता है:

(тут будут стили } @media स्क्रीन और (अधिकतम-चौड़ाई: 1024px गुणा) {( शैलियों देखते हैं}

@media, которая дает понять, что будет использоваться медиазапрос, идет указание типа устройства ( screen – экран) и дополнительные параметры. और अतिरिक्त पैरामीटर - @media निर्देश है, जो यह स्पष्ट है कि मीडिया क्वेरी प्रयोग किया जाता है बनाता है के बाद, वहाँ डिवाइस (स्क्रीन स्क्रीन) के प्रकार का एक संकेत है। Max Width. इस उदाहरण में, सीएसएस मीडिया के प्रश्नों अधिकतम चौड़ाई संपत्ति का उपयोग करें। px. इसका मतलब है कि ब्रेसिज़ में सूचीबद्ध शैलियों शामिल किया जाएगा, अगर 1024 पिक्सल से डिवाइस स्क्रीन आकार के उपयोगकर्ता। и and не обязательны. स्क्रीन और और बाध्यकारी नहीं। आप यह लिख सकते हैं:

@media (अधिकतम-चौड़ाई: 1024px गुणा) {}

इस तरह के एक मामले में, गुण किसी भी डिवाइस पर इस्तेमाल किया जा रहा ही नहीं, उन है कि टीवी से लैस हैं।

एक से अधिक पैरामीटर निर्दिष्ट करना

आप कई उपकरणों है कि शैली का चयन करने के लिए इस्तेमाल किया जाएगा की सीमा को सीमित करना चाहते मान लीजिए। px, но не больше 500 px. मान लीजिए कि आप केवल जो एक स्मार्टफोन से आपकी साइट पर आने के गुणों दिखाना चाहते हैं, स्क्रीन आकार कम से कम 320 पिक्सल है, लेकिन कोई 500 से अधिक पिक्सल नहीं है। इस तरह के एक मामले में, अनुरोध रूप ले लेता है:

@media (न्यूनतम-चौड़ाई: 320px) और (अधिकतम-चौड़ाई: 500px) {}

and. आप प्रोग्रामिंग के साथ परिचित हैं, तो आप जानते हैं कि न्यू जर्सी क्या ऑपरेटर आवेदन किया है और कर रहा है। जो लोग नहीं जानते के लिए: यह जाँच करता है अगर दोनों की स्थिति सही हैं। क्वेरी स्क्रीन में ई सक्रियण गुण 320 से कम नहीं और नहीं 500 से अधिक पिक्सल होना चाहिए।

and не ограничивается одним. और ऑपरेटरों के नंबर एक तक सीमित नहीं है। आप उन्हें जितना आप चाहते हैं के रूप में रख सकते हैं। टीवी के लिए - उदाहरण के लिए, स्मार्ट फ़ोन और काफी अलग के लिए एक निश्चित आकार स्क्रीन बनाने का प्रयास करें।

एक महत्वपूर्ण बात - उपयोगकर्ता उपकरण के ओरिएंटेशन। किसी ने पोर्ट्रेट ओरिएंटेशन में अपने स्मार्टफोन, किसी पर वेबसाइट ब्राउज़ कर - परिदृश्य के साथ। orientation:portrait, для вторых, соответственно, orientation:landscape. दूसरी, क्रमशः, उन्मुखीकरण के लिए, चित्र: पूर्व के लिए, आप एक अतिरिक्त शर्त उन्मुखीकरण की आवश्यकता होगी परिदृश्य। @media. ये लाइनें भी @media टीम निम्नलिखित कोष्ठकों में दिखाया जाता है। and. आप के माध्यम से उन्हें साझा कर सकते हैं और।

एक और दिलचस्प अति सूक्ष्म अंतर। and вы вполне можете использовать оператор or. इसके बजाय, और आप अच्छी तरह या ऑपरेटर का उपयोग कर सकते हैं। उन्होंने कहा कि सच होना अनुरोध में कम से कम एक शर्त की जरूरत है! उदाहरण के लिए:

) {} @media (अधिकतम-चौड़ाई: 500px) या (उन्मुखीकरण: चित्र) {}

px ИЛИ используется портретная ориентация, стили в фигурных скобках начнут действовать. स्क्रीन कम से कम 500 px या उपयोग पोर्ट्रेट ओरिएंटेशन है, तो ब्रेसिज़ प्रभाव शैलियों का समय लगेगा।

ठीक करने के लिए नहीं कीवर्ड

not. मीडिया क्वेरी, आप शब्द नहीं डाल सकते हैं। यह इस प्रकार से किया जाता है:

@media (नहीं अधिकतम-चौड़ाई: 700px ) {}

यदि अधिकतम चौड़ाई 700 पिक्सल के बराबर नहीं है गुण सक्रिय हो जाते हैं।

मीडिया सुविधाओं

प्रश्नों कई पूर्व स्थापित कार्यों के लिए इस्तेमाल किया जा सकता है। W3C. आप सभी की ऑनलाइन W3C कर सकते हैं से परिचित हों। पर्याप्त अधिकांश कोडर खुद के लिए तीन मुख्य:

• (о нем мы уже говорили); अभिविन्यास (हम पहले से ही इसके बारे में बात की थी);
• (ширина, ее тоже упоминали); चौड़ाई (चौड़ाई, यह भी उल्लेख किया गया है);
• (высота). ऊंचाई (ऊंचाई)।

ऊंचाई शायद ही कभी इस्तेमाल किया जाता है, लेकिन कुछ मामलों में यह सेटिंग उपयोगी हो सकता है कर रहे हैं।

कहां और कैसे अनुरोध जगह?

कई वेब डिजाइनर उन्हें किसी भी तरह फ़ाइल शैलियों के अंत करने के लिए डाल दिया। उदाहरण के लिए, पहले मुख्य शैलियों को सूचीबद्ध करता है, और उसके बाद, दस्तावेज़ के नीचे में रखा अनुरोध।

यह बहुत अच्छा नहीं है। अधिक सुविधाजनक सही मुख्य शैलियों के बाद विभिन्न उपकरणों के लिए गुण जगह। उदाहरण के लिए, आप एक div है, जो लाल फ़ॉन्ट रंग निर्धारित किया है:

div {

रंग: लाल;

}

तुरंत बाद अनुरोध इंगित करता है:

@media (न्यूनतम-चौड़ाई: 320px) {}

गुण निर्धारित करता है।

इस तरह के एक दृष्टिकोण यदि आप "का उपयोग कर रहे शुद्ध» सीएसएस बोझिल होगा। पूर्वप्रक्रमक की मदद के लिए। वे और अधिक सटीक आवेदन अनुरोधों के लिए दिलचस्प अवसरों का एक बहुत कुछ है।

एक अन्य विकल्प - अलग शैली फाइलों में विभिन्न उपकरणों के लिए गुण का मौक़ा मिला। यह विशेष रूप से उपयोगी है अगर आप आयात करने के लिए एक पूर्वप्रक्रमक निर्देश का उपयोग करें। परिणाम को संपादित करने के लिए एक आसान, स्वच्छ कोड है।

किसका उपयोग के लिए? यह सब व्यक्तिगत वरीयताओं को और टीम की विशेषताओं पर निर्भर करता है। शायद, अपने काम के स्थान पर मीडिया क्वेरी रखकर स्वीकार किया जाएगा की एक निश्चित तरीका है।

इसके अलावा भूल नहीं है कि आप नवीनतम सॉफ्टवेयर के साथ अपने जीवन को आसान बनाने में कर सकते हैं। यह सिर्फ पूर्वप्रक्रमक के बारे में नहीं है। Gulp समूह सीएसएस मीडिया के प्रश्नों के साथ की प्रक्रिया बहुत आसान बना सकते हैं। इस उपकरण या उसके अनुरूप में से किसी में महारत हासिल करने की सिफारिश की।