पिक्सेल रक्षा शब्द मीडिया प्रश्न

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

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

क्या होगा अगर मैं आपको बताता हूं कि मीडिया के प्रश्नों में पिक्सल का उपयोग करने से न केवल लेआउट को कोई नुकसान होता है, बल्कि ईएमएस का उपयोग करने के भी फायदे हैं?

---

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

पिक्सेल की मध्यस्थता वाले मीडिया प्रश्न ज़ूम के साथ हस्तक्षेप नहीं करते हैं

चलो पिक्सेल के खिलाफ "सबसे महत्वपूर्ण तर्क" से शुरू करते हैं: माना जाता है, जब किसी पृष्ठ को एक पुराने ब्राउज़र में बड़ा किया जाता है, तो मीडिया क्वेरी के पिक्सेल मान काम नहीं करते हैं। यह मात्र एक झूठ है। सभी लोकप्रिय ब्राउज़रों में ज़ूम के साथ पिक्सेल मीडिया क्वेरीज़ ठीक काम करती हैं। इंटरनेट एक्सप्लोरर 8 में भी!

हां, IE 8 मीडिया के प्रश्नों का समर्थन नहीं करता है । लेकिन अगर आप अपने प्रोजेक्ट में उल्लेखनीय रिस्पोंड.जेएस पॉलीफिल का उपयोग करते हैं, तो IE 8 इसे मीडिया के प्रश्नों के लिए पूर्ण समर्थन के साथ प्रदर्शित करेगा। और आपको पता है क्या? वे इसमें ज़ूम के साथ भी सही ढंग से काम करते हैं। Ctrl दबाए रखते हुए माउस व्हील को चालू करें - पेज लेआउट फिर से बनाया गया है। उदाहरण के लिए, जिस साइट पर IE में ज़ूम एनीमेशन दाईं ओर दिखाया गया है, मैंने निम्न फ़ॉर्म के मीडिया प्रश्नों का उपयोग किया:

@media (min-width: 401px) { #header-first { float: left; width: 47.82609%; margin-right: 4.34783%; }} 

अधिक प्राचीन IE हाथ में नहीं था, लेकिन इससे कोई फर्क नहीं पड़ता - रूस में IE7 की हिस्सेदारी केवल 0.7% है, IE6 - 0.1%, और वह, अधिकांश भाग के लिए, राज्य संस्थानों के कारण है।

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

UPD 2013-10-31 : मैंने पाया कि सफारी मीडिया क्वेरीज़ ज़ूम के साथ काम नहीं करती है। लेकिन वे कोई फर्क नहीं पड़ता कि वे किस इकाई का उपयोग करते हैं। KrylCW ने यह पुष्टि करने में मदद की कि यह सफारी 7. के लिए सच है। इसके अलावा, इसके आंकड़ों के अनुसार, मीडिया प्रश्न Yandex.Browser में MacOS के लिए ज़ूम करने पर काम नहीं करते हैं (वर्तमान संस्करण 1.7.1364.22074 (0b635012), लेकिन वे काम करते हैं यदि आप ज़ूम करने के बाद अपडेट करते हैं पेज।

मैंने विंडोज के तहत Yandex.Browser की कोशिश की (वर्तमान संस्करण 13.10.1500.8765 (e504cce) है)। वहाँ यह चारों ओर का दूसरा तरीका है: पिक्सेल-आधारित मीडिया क्वेरीज़ सही ढंग से ज़ूम इन करते हैं, लेकिन रिश्तेदार नहीं करते हैं! आप पृष्ठ को ज़ूम करते हैं, मीडिया क्वेरी सही ढंग से काम करती है। मान लीजिए कि यह कदम 175% → 200% पर होता है। फिर आप विपरीत दिशा में ज़ूम करते हैं, और 200% → 175% कदम पर मीडिया क्वेरी काम नहीं करती है, लेकिन यह 100% → 90% कदम पर काम करती है। और यदि आप आगे और पीछे ज़ूम करते हैं, तो प्रत्येक चक्र के साथ अंतर बढ़ता है!

जो लोग इसे आज़माना चाहते हैं, उन्होंने खुद एक परीक्षण राइवेट किया: पिक्सल , ईएमएस ।

बेस फॉन्ट साइज़ को बदलने से ईएमएफ में सेट होने पर "ब्रेक आउट" हो जाता है

इस स्थिति की कल्पना करें। मुख्य या ग्राहक आपको कॉल करते हैं और कहते हैं: “हमारी साइट पर फ़ॉन्ट इतना छोटा क्यों है? मेरी पत्नी कुछ भी नहीं पढ़ सकती है, इसे बड़ा करें। ” बहस करना बेकार है। आप दुख की बात है कि डिजाइन विभाग के दरवाजे पर एक दोषी नज़र डालते हैं, CSS कोड खोलते हैं और आधार फ़ॉन्ट का आकार 13px से बढ़ाकर 16px कर लेते हैं (हाँ, बेस फॉन्ट का आकार अभी भी पिक्सल में सेट है, वैसे भी)।

इससे क्या होता है? Ems में निर्दिष्ट सभी विराम बिंदुओं को स्थानांतरित कर दिया गया है। अब, गोलियों पर, साइट को एक कॉलम में प्रदर्शित किया जाता है: जिस तरह से यह केवल फोन पर दिखता था। यह कुछ ऐसा दिखता है (खिड़की की चौड़ाई 900px से कम हो और भयभीत हो)। क्या आप इस बारे में खुश हैं? मैं यह तर्क देने के लिए तैयार हूं कि यदि आप स्वयं को ऐसी स्थिति में पाते हैं, तो आप सभी मीडिया प्रश्नों को फिर से लिखने की जल्दबाज़ी में शपथ लेंगे ... या यदि परियोजना प्रीप्रोसेसर का उपयोग नहीं करती है तो पूर्ण आवाज़ में।

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

लेकिन अपने आप से झूठ मत बोलो। किसी भी व्यावसायिक परियोजना का प्रदर्शन, आप चाहते हैं (या आपका ग्राहक चाहता है) सबसे लोकप्रिय उपकरणों पर एक सख्ती से परिभाषित लेआउट। उदाहरण के लिए, ताकि पोर्ट्रेट मोड में iPad पर एक कॉलम में एक मोबाइल फोन पर दिखाई देने वाले थंबनेल तीन स्तंभों के साथ ग्रिड में बदल जाएं। जब आप फ़ॉन्ट आकार बदलते हैं तो आप इसे नहीं तोड़ना चाहते। यदि आपके डिजाइनर ने तय किया है कि लैंडस्केप मोड में iPad पर एक साइडबार होना चाहिए, तो यह होना चाहिए कि साइट पर फ़ॉन्ट आकार का उपयोग करने का कोई फर्क नहीं पड़ता है। यदि एक संकीर्ण साइडबार के लिए फ़ॉन्ट बहुत बड़ा है, तो आप साइडबार से छुटकारा पाने के बजाय फ़ॉन्ट को कम कर देंगे।

हां, सामग्री-उन्मुख साइटों के लिए, पाठ के स्तंभ की चौड़ाई आरामदायक सीमाओं से परे नहीं होनी चाहिए। लेकिन, सबसे पहले, इस चौड़ाई की एक विस्तृत श्रृंखला है। मैं 45-75 वर्णों की सिफारिश जानता हूं, यानी स्तंभ की चौड़ाई को 66 प्रतिशत अंक तक दर्द रहित रूप से बदला जा सकता है। दूसरे, ऐसी चौड़ाई को मानक क्यों माना जाता है? किसी भी चमकदार पत्रिका को खोलें, बहुत बार पाठ 15 वर्णों के स्तंभ आते हैं, और यह किसी के लिए नहीं होता है कि यह बुरा है। उदाहरण के लिए, जब मैंने इसे जाम से भरी मेट्रो कार में पढ़ने की कोशिश की तो मेरे लिए पत्रिका को रोल करना बहुत सुविधाजनक था। और हैबे पर पाठ के स्तंभ की चौड़ाई 75 से लगभग 115 वर्णों तक है, और हैबर के अधिकांश आगंतुक पाठ को 115 वर्णों के चौड़े हैं।

वैसे, क्या आपने यहां अवधारणाओं का प्रतिस्थापन देखा है? पिक्सेल-आधारित मीडिया प्रश्नों का उपयोग करके इष्टतम पाठ चौड़ाई भी बनाई जा सकती है।

और अंत में, कितनी बार आपको पहले से ही पूरी हो चुकी परियोजना पर सभी फोंट के आकार को बदलना होगा, और बाकी सब को फिर से डिजाइन किए बिना? और अगर आपके पास em'ah में सभी फोंट हैं, और क्लाइंट ने फॉन्ट को केवल मुख्य पाठ को बढ़ाने की मांग की है? क्षमा करें, अंतिम प्रश्न लेख के विषय पर लागू नहीं होता है।

Ems में परिभाषित आसन्न मीडिया क्वेरीज़ लैप्ड हैं

जब एक की अधिकतम चौड़ाई दूसरे की न्यूनतम चौड़ाई से मेल खाती है तो मैं मीडिया के प्रश्नों की एक जोड़ी को "आसन्न" कहता हूं। मैं आपको छत से लिया गया एक उदाहरण देता हूं:

 .container { color: black; background-color: white; }} @media (max-width: 40em) { .container { color: red; }} @media (min-width: 40em) { .container { background-color: red; }} 

लगता है कि एक आगंतुक क्या देखेगा जो "भाग्यशाली" है वह इस साइट को एक ब्राउज़र में खोल देगा जो पूरी तरह से 40em चौड़ा है?

ओवरलैप केवल एक पिक्सेल है, लेकिन यह है। यदि किसी साइट पर आने वाला आगंतुक अचानक स्क्रीन की इतनी चौड़ाई पाता है, तो पेज और डिज़ाइन का लेआउट विकृत हो सकता है, यहां तक ​​कि पूर्ण अपठनीयता के बिंदु तक भी।

पिक्सेल का उपयोग करते समय, समस्या प्राथमिक और पूरी तरह से विश्वसनीय तरीके से हल की जाती है:

 @media (max-width: 600px) { /* ... */ } @media (min-width: 601px) { /* ... */ } 

जब मैंने बहुमत की राय का आँख बंद करके पालन किया, तो ईएमएस पर मीडिया के प्रश्नों को लिखा और ओवरलैप पाया, मैंने समस्या को उसी तरह हल करने की कोशिश की: (min-width: 20,1em) । ओवरलैप को एक अंतराल से बदल दिया गया था: एक निश्चित खिड़की की चौड़ाई पर न तो एक और न ही अन्य मीडिया क्वेरी लागू होती है। मैंने 20.01 की कोशिश की, फिर 20.001 ... आर्टिलरी फोर्क का उपयोग करते हुए, मैंने दशमलव बिंदु के बाद शेष के वांछित मूल्य को खोजने में कामयाब रहा।

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

आपको इस जगह पर एक अस्पष्ट एहसास होना चाहिए कि यह रास्ता किसी तरह है ... गलत है। कम से कम मुझ में यह उठी। मैंने स्थिति को पक्ष से देखने की कोशिश की और सवाल पूछा: मैं वास्तव में क्या कर रहा हूं?

और यह हमें निम्नलिखित तर्क पर लाता है:

एम इन मीडिया क्वेश्चंस दो पिक्सेल मूल्यों के बीच एक मध्यस्थ हैं: आधार फ़ॉन्ट आकार और ब्राउज़र विंडो की चौड़ाई

जैसा कि ऊपर उल्लेख किया गया है, आधार फ़ॉन्ट आकार हमेशा पिक्सेल में निर्दिष्ट होता है। अन्यथा, ब्राउज़र को बस यह नहीं पता है कि फ़ॉन्ट का आकार एक ईएम के बराबर माना जाता है। यदि आधार फ़ॉन्ट आकार निर्दिष्ट नहीं है, तो कोई भी सामान्य ब्राउज़र इसे 16 पिक्सेल के लिए ले जाएगा। यदि यह em'ah में निर्दिष्ट है, तो ब्राउज़र इसे उसी 16 पिक्सेल से गुणा करेगा। यही बात अन्य सापेक्ष इकाइयों पर भी लागू होती है: 1 pt 4/3 px लिया जाता है, और एक सेंटीमीटर में पिक्सेल की संख्या OS में लिखी जाती है।

मीडिया प्रश्नों में न्यूनतम-चौड़ाई और अधिकतम-चौड़ाई को विंडो की चौड़ाई पर मैप किया जाता है, जो किसी भी ब्राउज़र में वर्चुअल पिक्सल्स की पूर्णांक संख्या द्वारा दिया जाता है। उदाहरण के लिए, चौथे iPhone समावेशी के लिए, यह 320 × 480, और iPhone 5 के लिए - 320x568 है।

Ems में मीडिया क्वेश्चन सेट करके, आप सबसे पहले अपने दिमाग में एमएमएस से रूपांतरण को बनाते हैं, और फिर एमएसीपी से पिक्सल में यह समझने के लिए कि स्क्रीन की चौड़ाई आपको वास्तव में इस ब्रेकपॉइंट में मिलती है।

खुद को उस तरह से प्रताड़ित करने की आवश्यकता नहीं है। बस पिक्सल का उपयोग करें।

पिक्सेल-आधारित मीडिया क्वेरी का उपयोग करने का मतलब "सामग्री पहले" दृष्टिकोण को छोड़ना नहीं है

तथ्य यह है कि आप मीडिया के प्रश्नों में पिक्सेल का उपयोग करते हैं, मीडिया प्रश्नों को डिज़ाइन करते समय आपको सामग्री से आने की क्षमता से वंचित नहीं करता है।

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

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

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

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

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

तीसरा, एक प्रीप्रोसेसर का उपयोग करें। एक परियोजना में एक प्रीप्रोसेसर को लागू करना आसान नहीं है, खासकर शुरुआती के लिए, लेकिन यह आपको बहुत अधिक मात्रा में उपद्रव से बचाएगा।

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

चौथा, विभिन्न मीडिया प्रश्नों के एक समूह के तहत दफन नहीं होने के लिए ...

स्लाइस में स्क्रीन साइज स्केल को स्लाइस करें

मीडिया के प्रश्नों के साथ काम करने के कार्य को सुविधाजनक बनाने के लिए, मैंने ब्रेकप्वाइंट स्लीकर एक्सटेंशन का निर्माण किया (जो बदले में, ब्रेकप्वाइंट का उपयोग करता है - मीडिया प्रश्नों के साथ काम करने के लिए एक बहुत शक्तिशाली और सार्वभौमिक विस्तार)।

ब्रेकप्वाइंट स्लीकर का विचार बहुत सरल है। आप छोटे अंतराल पर ब्रेकपॉइंट सेट करते हैं, उदाहरण के लिए: 400px, 600px, 800px, 1050px। मॉड्यूल क्रम में इन स्थानों की संख्या:

1. 0-400
2. 401-600
3. 601-800
4. 801-1050
5. 1051 - ∞

और फिर Sass कोड में आप सिर्फ यह कहते हैं कि आपको मीडिया क्वेरी को डालने के लिए किस अंतराल से:

• at(2) - समकक्ष (min-width: 401px) and (max-width: 600px)
• from(2) - समकक्ष (min-width: 401px)
• to(2) - समकक्ष (max-width: 600px)
• between(2, 4) - समकक्ष (min-width: 401px) and (max-width: 1050px)

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

यदि आपके पास ब्रेकपॉइंट स्लाइसर का उपयोग करने के बारे में कोई प्रश्न है, तो इसे बगट्रैकर में पूछने में संकोच न करें (यदि आप अंग्रेजी जानते हैं, तो यह अंग्रेजी में बेहतर है)।