क्या अब भी प्रासंगिक हैं?

Question

थ्रेड्स को इस तरह से पढ़ने से मेरी समझ यह है कि ईमेज की बात बेस फॉन्ट साइज के आधार पर आपके वेबपेज के सभी मापों को परिभाषित करना है , जिसे आपके ब्राउजर द्वारा सेट किया जा सकता है।

उदाहरण के लिए, Chrome में आप यह करके जा सकते हैं settings -> show advanced settings -> web content -> font size: very large। मैं यह कर सकता हूं यदि मैं एक बड़े, उच्च रिज़ॉल्यूशन मॉनिटर का उपयोग कर रहा था, तो वह बहुत दूर था।

मैंने एक प्लंकर बनाया जो आकार और आकार में px के बीच के अंतर को प्रदर्शित करता है।

#div1 {
  width: 320px
}

#div2 {

  width: 20em;
}

यदि मेरे ब्राउज़र में मैंने फ़ॉन्ट आकार को मध्यम पर सेट किया है, तो ये divs एक ही आकार, आधार फ़ॉन्ट आकार 16px होगा, इसलिए 20em या 320px।

हालाँकि, जब मैं अपने ब्राउजर का फॉन्ट साइज बहुत बड़ा कर लेता हूं, तो हम देख सकते हैं कि ईमेज में मापा गया डिविजन साइज बढ़ा है।

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

body {
  font-size: 16px;
}

क्योंकि अब मेरी सीएसएस ब्राउज़र द्वारा निर्धारित फ़ॉन्ट आकार को ओवरराइड कर रही है।

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

वेब के आसपास देख रहे हैं - वेबसाइट का एक बहुत करते हैं उनके शरीर टैग में सेट फ़ॉन्ट आकार।

उदाहरण के लिए स्टैक ओवरफ्लो, बॉडी टैग में फ़ॉन्ट-आकार को 13px पर सेट करता है। मेरे ब्राउज़र में फ़ॉन्ट आकार सेट करना स्टैक ओवरफ़्लो के लेआउट को थोड़ी सी भी प्रभावित नहीं करता है।

Google खोज परिणाम ऐसा नहीं करता है।

(ये दोनों स्क्रीनशॉट क्रोम फॉन्ट साइज़ के साथ बहुत बड़े और 100% ज़ूम पर सेट किए गए हैं)।

तो शायद आप तर्क दे सकते हैं कि बॉडी टैग में फ़ॉन्ट आकार सेट करना एक बुरा विचार है क्योंकि यह उपयोगकर्ता की स्वयं की पहुंच सेटिंग्स को रोकता है। लेकिन यह देखते हुए कि उपयोगकर्ता आकारों को बढ़ाने के लिए ज़ूम कर सकता है (जो आनुपातिक रूप से सभी पिक्सेल भी बढ़ाएगा) - यह एक वास्तविक समस्या नहीं लगती है।

Comments

एक उपयोगकर्ता अभी भी body { font-size: XYZ; }body { font-size: ZYX !important; }

— पीटर टेलर

Answer 1

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

body {
  font-size: 16px;
}

क्योंकि अब मेरी सीएसएस ब्राउज़र द्वारा निर्धारित फ़ॉन्ट आकार को ओवरराइड कर रही है।

आप पहुंच के बारे में भूल रहे हैं ।

C14 देखें : वेब सामग्री एक्सेसिबिलिटी दिशानिर्देश (WCAG 2.0) से फ़ॉन्ट आकार के लिए em इकाइयों का उपयोग करना ।

अपने ब्राउज़र के फ़ॉन्ट आकार विकल्प को बहुत बड़े पर सेट करें । अब W3C जैसी वेबसाइट पर जाएं । पाठ कैसा दिखता है?

यह वह विकल्प है जिसके बारे में यह है। StackExchange और कई अन्य वेबसाइटों के डेवलपर्स ने फैसला किया कि उनकी पसंद अधिक महत्वपूर्ण है कि उन उपयोगकर्ताओं के विकल्प जो नेत्रहीन हो सकते हैं। यह विकल्प सही है या गलत इस सवाल के दायरे से बाहर है, और इसका जवाब आवश्यक नहीं है।

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

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

तो शायद आप तर्क दे सकते हैं कि बॉडी टैग में फ़ॉन्ट आकार सेट करना एक बुरा विचार है क्योंकि यह उपयोगकर्ता की स्वयं की पहुंच सेटिंग्स को रोकता है। लेकिन यह देखते हुए कि उपयोगकर्ता आकारों को बढ़ाने के लिए ज़ूम कर सकता है (जो आनुपातिक रूप से सभी पिक्सेल भी बढ़ाएगा) - यह एक वास्तविक समस्या नहीं लगती है।

यह दो कारणों से एक वास्तविक समस्या है।

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

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

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

साइट मेनू का एक उदाहरण लें (पृष्ठ के शीर्ष पर, एक पंक्ति में पोस्ट किए जा रहे लिंक के साथ)। ज़ूमिंग के साथ, आप जानते हैं कि मेनू की ऊंचाई अन्य तत्वों के अनुपात में बदल जाएगी। पाठ आकार विकल्प के साथ, यह व्यवहार निर्धारित करने के लिए आप पर निर्भर है। आप मान सकते हैं कि एक नेत्रहीन व्यक्ति 50pxसभी मामलों में आपके -he मेनू को देख पाएगा: कोई भी सफेद पृष्ठभूमि पर एक काले मेनू को याद नहीं करेगा। या आप यह तय कर सकते हैं कि इसकी ऊंचाई पाठ के लिए आनुपातिक होनी चाहिए, उदाहरण के लिए 1.5em।

Answer 2

ईएमएस का बिंदु आपके वेबपृष्ठ के सभी मापों को आधार फ़ॉन्ट आकार द्वारा परिभाषित करना है

यह मेरी ओर से शर्तों की गलतफहमी हो सकती है, लेकिन स्पष्ट करने के लिए: emवर्तमान तत्व के "फ़ॉन्ट आकार" के सापेक्ष है। remरूट फ़ॉन्ट आकार के सापेक्ष है।

मुझे लगता है कि पुराने ब्राउज़रों के दिनों में ईएमएस महत्वपूर्ण रहा होगा, जहां पृष्ठ पर ज़ूमिंग केवल फोंट को स्केल करेगी।

यही कारण है कि मैं का उपयोग नहीं है em। वास्तव में, आपके ज़ूमिंग का अनुभव मेरे दिमाग में आखिरी चीज है जब मैं माप की सापेक्ष इकाइयों का उपयोग करता हूं। मेरी चिंता दो गुना है।

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

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