मिडिया प्रश्न CSS: चरण वर्णन, सुविधा र समीक्षा द्वारा चरण

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

समय बित्यो। इन्टरनेट सस्ता भयो। बिक्री थप र थप फोन र ट्याब्लेटको बाहिर आए। केही समय पछि, लोकप्रिय साइटहरु को मालिक उनको टाउको scratching हैरान। तथ्याङ्क अनुसार, यो आफ्नो स्रोतहरू एक स्थिर पीसी संग भन्दा आफ्नो स्मार्टफोन भ्रमण गर्न बढी सम्भावना हुन्छ कि देखा!

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

CSS मिडिया प्रश्न को आगमन

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

त्यसपछि CSS3 मिडिया प्रश्न आए। तिनीहरूलाई गतिशील डिजाइन को कार्यान्वयन को मात्र संभावना आए।

गतिशील डिजाइन के हो?

स्रोत को उपस्थिति यसलाई ब्राउज भएको स्क्रिनको आकार अनुसार परिवर्तन भने यो अवधि प्रयोग गरिन्छ। यो कसरी बुझ्न? यसलाई सरल छ।

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

यो "शास्त्रीय" लेआउट रेखाचित्र। यसलाई व्यक्तिगत कम्प्युटर लागि पूर्ण, तर मोबाइल फोन को लागि पनि सुविधाजनक छैन। तेर्सो मेनु पनि व्यापक छ। सम्पर्क प्रत्येक अन्य टाढा अवस्थित छ। साइडबार जानकारी प्रयोग र सबै स्क्रिन स्क्रोल हुनेछ, र यो सबैको स्वाद छैन।

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

• शीर्ष - ठाडो मेनु संग एकाइ;
• यसलाई अन्तर्गत - सम्पर्क, अब पनि ठाडो राखिएका छन् जो संग ब्लक;
• साइडबार सामग्री <मुख्य> ट्याग सामग्री छेउमा प्रदर्शित, र यो माथि छैन।

यो उत्तरदायी वेब डिजाइन मिडिया प्रश्न के गर्न सकिन्छ को एक सरल उदाहरण हो। वास्तवमा धेरै बढी सम्भावनाहरू।

त्यसैले मिडिया प्रश्नहरु के हो?

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

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

CSS मिडिया प्रश्न ब्राउजर अनुकूलता

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

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

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

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

तपाईं निम्न विशेषताहरु प्रयोग गर्न सक्नुहुन्छ:

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

सबै छैन। , но они используются редко. त्यहाँ धेरै अतिरिक्त CSS मिडिया प्रश्न विशेषताहरू छन्, तर तिनीहरू विरलै प्रयोग गरिन्छ। all. साथै, तपाईंले एउटा मापदण्ड निर्दिष्ट छैन - सबै पूर्वनिर्धारित।

मिडिया प्रश्नहरु को संरचना

css. बरु एक शैली फाइल सिर्जना, तपाईं CSS कोड प्रयोग गर्न सक्नुहुन्छ। यो जस्तो देखिन्छ:

(тут будут стили } @media स्क्रिन र (अधिकतम चौडाई: 1024px) {( छन् शैलीहरू}

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

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

यस्तो अवस्थामा, गुण कुनै पनि उपकरणमा प्रयोग गर्न, टीवी संग सुसज्जित छन् ती केवल।

धेरै मापदण्डहरु निर्दिष्ट

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

@media (मिनेट-चौडाइ: 320px) र (अधिकतम चौडाई: 500px) {}

and. तपाईं कार्यक्रम परिचित हुनुहुन्छ भने, तपाईंले अपरेटर के लागू र छ थाहा न्यू जर्सी। थाहा नगर्ने ती लागि: यो दुवै अवस्था साँचो हो भने गर्ला। प्रश्न स्क्रिनमा ई सक्रिय गुण छैन 500 भन्दा बढी पिक्सेल 320 भन्दा कम र हुनुपर्छ।

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

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

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

) {} @media (अधिकतम चौडाई: 500px) वा (अभिमुखीकरण: पोर्ट्रेट) {}

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

ठीक-मिलाउने लागि खोजशब्द

not. मिडिया प्रश्न, तपाईं शब्द छैन सम्मिलित गर्न सक्नुहुन्छ। निम्नानुसार यस गरेको छ:

@media (छैन अधिकतम चौडाई: 700px ) {}

अधिकतम चौडाई 700 पिक्सेल बराबर छैन भने गुण सक्रिय छन्।

मिडिया सुविधाहरू

प्रश्नहरु धेरै पूर्व-स्थापित कार्य प्रयोग गर्न सकिन्छ। W3C. सबै तपाईं अनलाइन W3C गर्न सक्छन् आफैलाई Familiarize। पर्याप्त सबैभन्दा coders तीन मुख्य स्वामित्व:

• (о нем мы уже говорили); अभिमुखीकरण (हामी पहिले देखि नै यो बारे कुरा);
• (ширина, ее тоже упоминали); चौडाइ (चौडाई, यो पनि उल्लेख गरिएको छ);
• (высота). उचाइ (उचाइ)।

उचाइ शायद प्रयोग गरिन्छ, तर यो सेटिङ उपयोगी हुन सक्छ जो केही अवस्थामा छन्।

र कसरी कहाँ अनुरोध राख्न?

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

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

div {

रंग: रातो;

}

तुरुन्तै पछि अनुरोध संकेत:

@media (मिनेट-चौडाइ: 320px) {}

गुण Prescribes।

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

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

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

पनि नवीनतम सफ्टवेयर आफ्नो जीवन सरल गर्न सक्ने भूल छैन। यो केवल preprocessor बारेमा छैन। समूह CSS मिडिया प्रश्न सुडकना संग प्रक्रिया सजिलो बनाउन सक्छ। यो उपकरण वा यसको analogs कुनै पनि मास्टर गर्न सिफारिस गरियो।