फ़ॉन्ट आकार के लिए ट्विटर बूटस्ट्रैप का उपयोग पिक्सेल क्यों करता है?


104

यह देखते हुए कि ट्विटर बूटस्ट्रैप को उत्तरदायी / उपकरण के अनुकूल बनाया गया है, यह सापेक्ष फ़ॉन्ट आकार का उपयोग क्यों नहीं करता है?

जवाबों:


129

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

[अद्यतन] तो आज मार्क ओटो ने उस धागे पर उत्तर दिया जिसका मैंने ऊपर उल्लेख किया है। मुख्य रूप से 'पिक्सेल-परफेक्ट' वाक्यांश की पहुंच और उपयोग का कोई उल्लेख नहीं है:

ठीक है, इसलिए यहाँ थोड़ा पृष्ठभूमि के फैसले के बारे में है और आगे बढ़ने की योजना है।

पिक्सेल पूर्ण नियंत्रण प्रदान करते हैं और प्रत्येक ब्राउज़र में लगातार प्रतिपादन करते हैं।

डिज़ाइनर अभी भी ज्यादातर पिक्सेल में सोचते हैं और काम करते हैं।

ब्राउज़र इन दिनों पूरे पृष्ठों को स्केल करते हैं, इसलिए यह टाइप स्केलिंग या कुछ भी नहीं है।

ऐतिहासिक रूप से घोंसले के शिकार एक दर्द हो गया है और चित्र गणना / इच्छित पिक्सेल मूल्यों के लिए अतिरिक्त गणित की आवश्यकता हो सकती है।

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

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

मैं इस गो और +1 थ्रेड के बारे में मजबूत भावनाओं के साथ किसी को भी सुझाव दूंगा

[अद्यतन] V2.3 रिलीज ब्लॉगपोस्ट में V3 रोडमैप umms के लिए समर्थन जोड़ने का कोई उल्लेख नहीं करता है।

[अपडेट] बूटस्ट्रैप V3 के बारे में अधिक जानकारी के बहुत सारे पुल अनुरोध में उपलब्ध यहाँ मार्क ओटो से निम्नलिखित शामिल हैं:

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

फिर हाल ही में (इसकी टिप्पणियों में):

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

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

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

[अद्यतन] लगता है कि वीएमएस में V4 (Mdo यहाँ से उद्धृत ) का समर्थन किया जाएगा :

साथ आने वाले लोगों के लिए, जब हम IE8 समर्थन को छोड़ देंगे, तो हम पिक्सेल से REM में v4 में बदल पाएंगे। तब तक बहुत कुछ नहीं कर सकते।

[अपडेट फ़रवरी '17] बूटस्ट्रैप 4 अभी भी अल्फा में है, लेकिन इसके टाइपोग्राफी डॉक्स में रीम्स का उपयोग दिखाता है , लेकिन इसके लेआउट डॉक्स में रीम्स का उपयोग नहीं दिखाता है ।


4
समस्या यह है कि ऐसा लगता है कि यह बताने के लिए यहां कोई भी नहीं है कि पीएक्स से अधिक ईएम का उपयोग करने के लिए यह "सुलभता अनुकूल" क्यों है। मेरा मतलब ठीक है, कागज पर यह स्पष्ट लगता है, लेकिन वास्तविक जीवन में? क्या पिक्सेल आधारित वेबसाइटों पर अटके हुए उपयोगकर्ताओं के वास्तविक उदाहरण हैं? वास्तविक आँकड़े और वास्तविक समस्याएं जो पिक्सेल का कारण बनती हैं? मुझे लगता है कि इस बहस में यही असली सवाल है। सबूत की कमी यही है कि अधिकांश लोग पीएक्स का उपयोग करते हैं।
adriendenat

7
ऑपरेटिंग सिस्टम स्तर और ब्राउज़र स्तर फोंट दृष्टि समस्याओं के साथ उन लोगों द्वारा बढ़ाए जाते हैं। emऐसे लोगों के लिए आवश्यक है, इसलिए "पहुंच"।
स्टीवन वचोन

1
यहाँ एक चर्चा है जो बताती है कि फॉन्ट साइज़ बढ़ाना ज़ूम से बेहतर क्यों है, webaim.org/discussion/mail_thread?thread=5849 "मैंने पिछले साल CSUN में किसी से बात की थी, जिसमें बताया गया था कि पूरे पेज पर जूम करना इतना उपयोगी नहीं है उसके पास। उसके पास बहुत कम दृष्टि है और उसे पढ़ने के लिए पृष्ठ पर पाठ के आकार को काफी महत्वपूर्ण रूप से बढ़ाने की आवश्यकता है। हालांकि, जब आप पृष्ठ ज़ूम का उपयोग करते हैं, तो आपके पास बाएं और दाएं स्क्रॉल करने के लिए समाप्त होता है। पाठ पढ़ें और यह वास्तव में तेजी से पुराना हो जाता है। आपको अपना स्थान खोना बहुत आसान है जब आपको ऐसा करना होगा। "
टोनी

4
एम-आधारित आकार भी मोबाइल विकास के अभिन्न अंग हैं। डिवाइस निर्माता अपने डिवाइस पर सुगमता के लिए इष्टतम आधार फ़ॉन्ट आकार निर्धारित करने के लिए पैसा और समय खर्च करते हैं । हम उस सभी शोध को अमान्य कर देते हैं जब हम कहते हैं कि "फ़ॉन्ट-आकार: 14 पीएक्स।" UltraAwesomeRetina3.0 पर इसका क्या मतलब है? या निचले पिक्सेल-प्रति-इंच के साथ 52 "स्क्रीन पर; निर्माता को आधार फ़ॉन्ट आकार छोड़ना एक सर्वोत्तम-अभ्यास, सादा और सरल है। filamentgroup.com/lab/… blog.cloudfour.com/ ...
Jay Dansand

3
चूँकि मैं एक हूँ (चलो बस इसे कॉल करते हैं) ईएम कट्टरपंथी, मुझे इस तथ्य से प्यार है कि आप इस उत्तर को अपडेट करते रहे ... और इससे भी अधिक कि आपने विकल्पों को इंगित किया। +1 ;)
ई-सुशी

11

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

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

जबकि इसका उपयोग अक्सर कम से कम अनुभव वाले लोगों द्वारा किया जाता है - और इसमें कुछ भी गलत नहीं है - इसका उपयोग बहुत अधिक अनुभव वाले लोग भी करते हैं।

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

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

हां, कुछ मुद्दे हैं। pxफ़ॉन्ट आकार और कम का उपयोग करने के लिए दो हैं। हालाँकि, क्योंकि यह पूरी तरह से खुला स्रोत है, आप आसानी से उन दोनों को मापने के लिए विकल्प पा सकते हैं।

मैंने फाउंडेशन की जांच की और जो मैंने देखा उसे पसंद किया, लेकिन मैं IE8 का समर्थन करने की दुर्भाग्यपूर्ण स्थिति में हूं, क्योंकि कई देव हैं। फाउंडेशन ने IE8 के लिए समर्थन को गिरा दिया है, जिससे यह मेरे लिए 'नो गो' बन गया है। इस के बावजूद, मैं एक पूरे ढांचे, वह यह है कि सबसे विशेष रूप से कुछ को खारिज करने के बारे में नहीं कर रहा हूँ नि: शुल्क उपयोग करने के लिए और मुक्त करने के लिए पूरी तरह से कुछ मुद्दों के आधार पर संशोधित करने के लिए!

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


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

2
हाँ, मैं आपको सुनता हूँ - कभी-कभी आप सिर्फ कोडिंग के साथ बहुत उकसाए जाते हैं, आप बाहर चाबुक मारते हैं :) कम से कम, बूटस्ट्रैप 3.0 के साथ, जब दुर्व्यवहार किया जाता है, तो कुछ मानक होते हैं। यही फाउंडेशन पर लागू होता है। बहुत कुछ है जो दोनों से सीखा जा सकता है। अंततः, समय को देखते हुए, 'अपना खुद का रोल करना' आगे बढ़ने का तरीका है।
मैथ्यू ट्रो

2
एक अन्य उत्तर पर टिप्पणी करने का उत्तर पोस्ट करना कुछ भ्रमित करने वाला है ... (सिर्फ कह रहा है)
ई-सुशी

इस पर लाया गया कुछ संतुलन देखकर अच्छा लगा :) बूटस्ट्रैप बहुत सारे लोगों के लिए अच्छा काम करता है, अनुभवी और नया समान।
अररिया कार्टर-वीर

इस सवाल का जवाब नहीं है।
ग्रेग स्मिट

6

यदि आप अभी भी em और रेम सपोर्ट के साथ बूटस्ट्रैप पसंद करते हैं, तो आप इस पर एक नज़र डाल सकते हैं - https://github.com/ivayloc/twbs-rem-em पर पिक्सेल को रेम या ईएम इकाइयों में बदलने के लिए कोई गणना करने की आवश्यकता नहीं है, इस के लिए निर्माण है @mixins- @include rem(property, values)- यह भी px करने के लिए वापसी और उन्हें आप उपयोग कर सकते हैं रूपांतरण के लिए em(value)


मैं अब टीबीएस का उपयोग नहीं कर रहा हूं क्योंकि मैंने पाया है कि फाउंडेशन को बेहतर सोचा जा सकता है, हालांकि यह एक अच्छा समझौता है।
अंडरस्ट्रेक्शन

1

जब भी मैं बूटस्ट्रैप का बड़े पैमाने पर उपयोग करता हूं, तो कुछ क्षेत्र ऐसे होते हैं, जहां पहुंच बैक बर्नर ले जाती है। मुझे लगता है कि एक प्लेटफ़ॉर्म के साथ अपरिहार्य ट्रेड-ऑफ़ है जो कि बड़े पैमाने पर उपयोग किया जाता है।

मुझे पूरी तरह से पता है कि उन्होंने फ़ॉन्ट-आकार के लिए पिक्सेल बनाए रखने का विकल्प क्यों चुना है। एक फ्रेमवर्क के फोंट के लिए इनहेरिटेंस के मुद्दे कुल दुःस्वप्न हैं।

rems एक वैकल्पिक विकल्प है, लेकिन ब्राउज़र समर्थन अभी भी समस्याग्रस्त है।

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

यह बूटस्ट्रैप की सुंदरता है - और इसकी तरह रूपरेखा - यह काम करने के लिए एक ठोस आधार है।

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

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


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

0

मुझे लगता है, इसकी वजह से डेस्कटॉप पहले दृष्टिकोण। ट्विटर बूटस्ट्रैप उत्तरदायी अनुकूल है, लेकिन "सुंदर गिरावट" दृष्टिकोण है।

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.