375

बंद हो गया । यह प्रश्न राय आधारित है । यह वर्तमान में उत्तर स्वीकार नहीं कर रहा है।

इस प्रश्न को सुधारना चाहते हैं? प्रश्न को अपडेट करें ताकि इस पोस्ट को संपादित करके तथ्यों और उद्धरणों के साथ उत्तर दिया जा सके ।

पिछले महीने बंद हुआ ।

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

मेरा प्रश्न है: क्या मुझे अपने सीएसएस में pxया उपयोग करना चाहिए rem?

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

मैं यह पूछ रहा हूं क्योंकि सीएसएस में दूरी के सबसे वांछनीय उपाय के रूप में बहुत से अलग-अलग राय हैं, और मुझे यकीन नहीं है कि कौन सा सबसे अच्छा है।

— TylerH
स्रोत

4

यह विवाद और तर्क और राय का विषय है, न कि उस तरह के तकनीकी प्रश्नों पर जो एसओ के लिए अच्छा है। वैसे, सही उत्तर "नहीं" है ☺

— जुक्का लालकृष्ण कोर्पेला

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

— टिम वर्मालेन

2

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

— टाइलर

418

टीएल; डीआर: उपयोग px।

तथ्यों

सबसे पहले, यह जानना बेहद जरूरी है कि प्रति युक्ति सीएसएस pxइकाई एक भौतिक डिस्प्ले पिक्सेल के बराबर नहीं है । यह हमेशा सच रहा है - 1996 सीएसएस 1 कल्पना में भी ।

CSS संदर्भ पिक्सेल को परिभाषित करता है , जो 96 dpi डिस्प्ले पर पिक्सेल के आकार को मापता है। ऐसे डिस्प्ले पर, जिसमें dd का 96dpi (जैसे रेटिना डिस्प्ले) से काफी भिन्न होता है, उपयोगकर्ता एजेंट pxयूनिट को बचाता है ताकि उसका आकार एक संदर्भ पिक्सेल से मेल खाता हो। दूसरे शब्दों में, यह पुनरुत्थान वास्तव में इसी कारण है कि 1 सीएसएस पिक्सेल 2 भौतिक रेटिना डिस्प्ले पिक्सल्स के बराबर है।

2010 तक (और मोबाइल जूम स्थिति के बावजूद) ने कहा, pxलगभग हमेशा एक भौतिक पिक्सेल के बराबर होता है, क्योंकि सभी व्यापक रूप से उपलब्ध डिस्प्ले 96 डीपीआई के आसपास थे।
emS में निर्दिष्ट आकार मूल तत्व के सापेक्ष हैं । इससे em"कंपाउंडिंग प्रॉब्लम" होती है, जहां नेस्टेड तत्व उत्तरोत्तर बड़े या छोटे हो जाते हैं। उदाहरण के लिए:
```
body { font-size:20px; } 
div { font-size:0.5em; }
```
हमें देता है:
```
<body> - 20px
    <div> - 10px
        <div> - 5px
            <div> - 2.5px
                <div> - 1.25px
```
CSS3 rem, जो हमेशा मूल htmlतत्व के सापेक्ष होता है, अब उपयोग में सभी ब्राउज़रों के 96% पर समर्थित है ।

रॉय

मुझे लगता है कि हर कोई इस बात से सहमत है कि आपके पृष्ठों को सभी के लिए अनुकूल बनाने के लिए, और नेत्रहीनों के लिए विचार करना अच्छा है। ऐसा एक विचार (लेकिन केवल एक ही नहीं!) उपयोगकर्ताओं को आपकी साइट के पाठ को बड़ा बनाने की अनुमति देता है, ताकि पढ़ने में आसानी हो।

शुरुआत में, उपयोगकर्ताओं को टेक्स्ट साइज़ को स्केल करने का एक तरीका रिश्तेदार आकार इकाइयों (जैसे emएस) का उपयोग करके प्रदान करना था । ऐसा इसलिए है क्योंकि ब्राउज़र के फ़ॉन्ट आकार मेनू ने रूट फ़ॉन्ट आकार बदल दिया है। इस प्रकार, यदि आप फ़ॉन्ट आकार निर्दिष्ट करते हैं, तो pxवे ब्राउज़र के फ़ॉन्ट आकार विकल्प को बदलते समय स्केल नहीं करेंगे।

आधुनिक ब्राउज़र (और यहां तक कि नहीं-तो-आधुनिक IE7) सभी ने डिफ़ॉल्ट स्केलिंग विधि को केवल छवियों और बॉक्स आकारों सहित, सब कुछ पर ज़ूम करने के लिए बदल दिया। अनिवार्य रूप से, वे संदर्भ पिक्सेल को बड़ा या छोटा बनाते हैं।

हाँ, किसी को अभी भी डिफ़ॉल्ट फ़ॉन्ट आकार (पुरानी शैली फ़ॉन्ट आकार विकल्प के समकक्ष) tweak करने के लिए अपने ब्राउज़र डिफ़ॉल्ट स्टाइलशीट बदल सकता है, लेकिन वह इसके बारे में जाने का एक बहुत ही गूढ़ तरीका है और मैं दांव कोई भी नहीं चाहते ¹ यह करता है। (क्रोम में, इसे उन्नत सेटिंग्स, वेब सामग्री, फ़ॉन्ट आकार के तहत दफन किया गया है। IE9 में, यह और भी अधिक छिपा हुआ है। आपको Alt दबाना होगा, और व्यू, टेक्स्ट साइज पर जाना होगा।) बस ज़ूम विकल्प को चुनना बहुत आसान है। ब्राउज़र का मुख्य मेनू (या Ctrl+ +/ -/ माउस व्हील का उपयोग करें )।

^{1 - सांख्यिकीय त्रुटि के भीतर, स्वाभाविक रूप से}

यदि हम ज़ूम विकल्प का उपयोग करते हुए अधिकांश उपयोगकर्ताओं के पैमाने मान लेते हैं, तो मुझे सापेक्ष इकाइयाँ अधिकांशतः अप्रासंगिक लगती हैं। जब एक ही यूनिट में सब कुछ निर्दिष्ट किया जाता है तो आपके पेज को विकसित करना बहुत आसान है (चित्र पिक्सेल में सभी से निपटा जाता है), और आपको कंपाउंडिंग के बारे में चिंता करने की आवश्यकता नहीं है। ( "मुझे बताया गया था कि कोई गणित नहीं होगा" - वहाँ की गणना करने के साथ काम कर रहा है जो 1.5em वास्तव में बाहर काम करता है।)

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

तो मेरा जवाब पिक्सेल इकाइयों का उपयोग है। मैं pxहर चीज के लिए इस्तेमाल करता हूं । बेशक, आपकी स्थिति भिन्न हो सकती है, और यदि आपको IE6 का समर्थन करना चाहिए (RFC के देवता आप पर दया करते हैं), तो आपको emवैसे भी एस का उपयोग करना होगा ।

— josh3736
स्रोत

43

आपको पिक्सल और रेम का इस्तेमाल करना चाहिए। इसलिए नए ब्राउज़रों को रीमेक मिलता है और पुराने ब्राउज़र पिक्सल में वापस आते हैं (जैसे कि वर्डप्रेस 2012 करता है)। यह Sass या कम के साथ स्वचालित किया जा सकता है इसलिए आप सभी px मान दर्ज करते हैं और यह स्वचालित रूप से px और रेम का आउटपुट करता है।

— cchiera

63

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

— रॉब

16

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

— ओलिवव

18

इस पर एक अनुवर्ती होना बहुत अच्छा होगा। रेम अब 95% + समर्थन पर है।

— उदाहरण के द्वारा सीखना आँकड़े

10

गलत, मुझे IE के बारे में परवाह नहीं है (किसी को भी नहीं करना चाहिए)।

— वाहिद अमीरी

193

_{मैं कुछ उत्कृष्ट ऐतिहासिक संदर्भ प्रदान करने के लिए josh3736 के उत्तर की प्रशंसा करना चाहूंगा । हालांकि यह अच्छी तरह से स्पष्ट है, सीएसएस परिदृश्य लगभग पांच वर्षों में बदल गया है क्योंकि यह सवाल पूछा गया था। जब यह प्रश्न पूछा गया था, px था सही जवाब है, लेकिन यह नहीं रह गया है आज सच है।}

tl; डॉ: उपयोगrem

इकाई अवलोकन

ऐतिहासिक रूप से pxइकाइयाँ आमतौर पर एक डिवाइस पिक्सेल का प्रतिनिधित्व करती हैं। उच्च और उच्च पिक्सेल घनत्व वाले उपकरणों के साथ यह अब कई उपकरणों के लिए नहीं है, जैसे कि Apple के रेटिना डिस्प्ले के साथ।

remइकाइयां r oot em आकार का प्रतिनिधित्व करती हैं । यह font-sizeजो भी मैच है :root। HTML के मामले में, यह <html>तत्व है; एसवीजी के लिए, यह <svg>तत्व है। font-sizeहर ब्राउज़र में डिफ़ॉल्ट * है 16px।

लेखन के समय, remलगभग 98% उपयोगकर्ताओं द्वारा समर्थित है । आप के बारे में है कि अन्य 2% चिंतित हैं, मैं आपको याद दिलाना होगा कि मीडिया क्वेरी कर रहे हैं भी उपयोगकर्ताओं के लगभग 98% द्वारा समर्थित ।

उपयोग करने पर `px`

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

यदि आप एक पतली सीमा चाहते थे, pxतो आप उपयोग कर सकते हैं 1px, जिसके साथ ptआपको 0.75ptसुसंगत परिणामों के लिए उपयोग करने की आवश्यकता होगी , और यह सिर्फ बहुत सुविधाजनक नहीं है।

उपयोग करने पर `rem`

remडिफ़ॉल्ट मान 16pxइसके उपयोग के लिए बहुत मजबूत तर्क नहीं है। लिखना लिखने 0.0625remसे भी बुरा है 0.75pt, तो कोई क्यों इस्तेमाल करेगा rem?

remअन्य इकाइयों पर लाभ के दो भाग हैं ।

उपयोगकर्ता की प्राथमिकताएँ सम्मानित की जाती हैं
आप जो चाहें, उसका स्पष्ट pxमान बदल सकते हैंrem

उपयोगकर्ता वरीयताएँ का सम्मान करना

ब्राउज़र ज़ूम पिछले वर्षों में बहुत बदल गया है। ऐतिहासिक रूप से बहुत सारे ब्राउज़र केवल बड़े पैमाने पर होंगे font-size, लेकिन यह तब तेजी से बदल गया जब वेबसाइटों ने महसूस किया कि उनके सुंदर पिक्सेल-परिपूर्ण डिज़ाइन किसी भी समय किसी व्यक्ति को ज़ूम इन या आउट करने पर टूट रहे थे। इस बिंदु पर, ब्राउज़र पूरे पृष्ठ को स्केल करते हैं, इसलिए फ़ॉन्ट-आधारित ज़ूमिंग तस्वीर से बाहर है।

उपयोगकर्ता की इच्छाओं का सम्मान करना तस्वीर से बाहर नहीं है। सिर्फ इसलिए कि एक ब्राउज़र के लिए सेट है 16pxडिफ़ॉल्ट रूप से, इसका मतलब यह नहीं किसी भी उपयोगकर्ता के अपनी वरीयताओं में परिवर्तन नहीं कर सकते हैं 24pxया 32pxकम दृष्टि या गरीब दृश्यता (पूर्व स्क्रीन चमक) के लिए सही करने के लिए। यदि आप अपनी इकाइयों को बंद कर देते हैं rem, तो उच्च फ़ॉन्ट आकार वाले किसी भी उपयोगकर्ता को आनुपातिक रूप से बड़ी साइट दिखाई देगी। सीमाएं बड़ी होंगी, पैडिंग बड़ी होगी, मार्जिन बड़ा होगा, सब कुछ तरल रूप से बढ़ेगा।

यदि आप अपने मीडिया प्रश्नों को आधार remबनाते हैं, तो आप यह भी सुनिश्चित कर सकते हैं कि आपके उपयोगकर्ता जो साइट देखते हैं, वह उनकी स्क्रीन पर फिट हो। एक विस्तृत ब्राउज़र पर font-sizeसेट के साथ एक उपयोगकर्ता , प्रभावी रूप से आपकी साइट को देख रहा होगा जैसा कि एक विस्तृत ब्राउज़र पर किसी उपयोगकर्ता को दिखाया गया है। उपयोग करने में RWD के लिए बिल्कुल कोई नुकसान नहीं है ।32px640px16px320pxrem

बदलते `px`मूल्य

क्योंकि remपर आधारित है font-sizeके :rootनोड, आप क्या बदलना चाहते हैं 1remका प्रतिनिधित्व करता है, तुम सब करने के लिए है बदल रहा है font-size:

:root {
  font-size: 100px;
}
body {
  font-size: 1rem;
}

<p>Don't ever actually do this, please</p>

स्निपेट का विस्तार करें

आप जो कुछ भी करते हैं, वह :rootतत्व font-sizeको एक pxमूल्य पर सेट नहीं करता है ।

आप सेट करते हैं font-sizeपर htmlएक करने के लिए pxमूल्य, आप एक तरह से उन्हें वापस पाने के लिए बिना उपयोगकर्ताओं की प्राथमिकताओं को उड़ा दिया है।

यदि आप के स्पष्ट मूल्य को बदलना चाहते हैं rem, तो %इकाइयों का उपयोग करें ।

इसके लिए गणित उचित रूप से सीधे-आगे है।

का स्पष्ट फ़ॉन्ट-आकार :rootहै 16px, लेकिन हम कहते हैं कि हम इसे बदलना चाहते हैं 20px। हमें बस इतना करना चाहिए कि इसे 16पाने के लिए कुछ मूल्य से गुणा करना होगा 20।

अपना समीकरण सेट करें:

16 * X = 20

और इसके लिए हल करें X:

X = 20 / 16
X = 1.25
X = 125%

:root {
  font-size: 125%;
}

<p>If you're using the default font-size, I'm 20px tall.</p>

स्निपेट का विस्तार करें

सब कुछ के गुणकों में सब कुछ 20महान नहीं है, लेकिन एक आम सुझाव के remबराबर करने के लिए स्पष्ट आकार बनाने के लिए है 10px। उसके लिए मैजिक नंबर 10/16जो है 0.625, या है 62.5%।

:root {
  font-size: 62.5%;
}

<p>If you're using the default font-size, I'm 10px tall.</p>

स्निपेट का विस्तार करें

समस्या अब है कि आपके डिफ़ॉल्ट है font-sizeपेज के आराम के लिए सेट रास्ता बहुत छोटा है, लेकिन वहाँ उस के लिए उन्हें आसानी से ठीक है: सेट एक font-sizeपर bodyका उपयोग कर rem:

:root {
  font-size: 62.5%;
}

body {
  font-size: 1.6rem;
}

<p>I'm the default font-size</p>

स्निपेट का विस्तार करें

यह ध्यान रखना महत्वपूर्ण है कि इस समायोजन के साथ, का स्पष्ट मान है rem, 10pxजिसका अर्थ है कि आपके द्वारा लिखा गया कोई भी मूल्य pxसीधे remदशमलव स्थान से टकराकर परिवर्तित किया जा सकता है।

padding: 20px;

में बदल जाता है

padding: 2rem;

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

:root {
  font-size: 6.25%;
}
body {
  font-size: 16rem;
}

और 1remबराबर है 1px।

तो आपके पास यह है, उपयोगकर्ता की इच्छाओं का सम्मान करने के लिए एक सरल समाधान, जबकि आपके सीएसएस को अधिक जटिल बनाने से भी बचा जाता है।

रुको, तो क्या पकड़ है?

मुझे डर था कि आप यह पूछ सकते हैं। जितना मैं दिखावा करना चाहता हूं कि remजादू है और सभी चीजों को हल करता है, नोट के कुछ मुद्दे अभी भी हैं। मेरी राय में कुछ भी नहीं टूट रहा है, लेकिन मैं उन्हें फोन करने जा रहा हूं ताकि आप यह न कह सकें कि मैंने आपको चेतावनी नहीं दी।

मीडिया क्वेरी (उपयोग `em`)

आपके द्वारा चलाए जा रहे पहले मुद्दों में से remएक मीडिया क्वेरी शामिल है। निम्नलिखित कोड पर विचार करें:

:root {
  font-size: 1000px;
}
@media (min-width: 1rem) {
  :root {
    font-size: 1px;
  }
}

यहां remमीडिया-क्वेरी लागू होने के आधार पर परिवर्तनों का मूल्य और मीडिया क्वेरी के मूल्य पर निर्भर करता है rem, इसलिए पृथ्वी पर क्या हो रहा है?

remमीडिया में प्रश्नों के प्रारंभिक मूल्य का उपयोग करता है font-sizeऔर (सफारी अनुभाग देखें) किसी भी परिवर्तन को ध्यान में नहीं रखना चाहिएfont-size जो :rootतत्व का हुआ हो । दूसरे शब्दों में, यह स्पष्ट मूल्य हमेशा होता है 16px ।

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

|   px | rem |
+------+-----+
|  320 |  20 |
|  480 |  30 |
|  768 |  48 |
| 1024 |  64 |
| 1200 |  75 |
| 1600 | 100 |

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

सफारी

दुर्भाग्य से सफारी के साथ एक ज्ञात बग है जहां :rootफ़ॉन्ट-आकार में परिवर्तन वास्तव में remमीडिया क्वेरी श्रेणियों के लिए परिकलित मानों को बदलते हैं। यह कुछ बहुत ही अजीब व्यवहार का कारण बन सकता है अगर :rootतत्व का आकार-प्रकार मीडिया क्वेरी के भीतर बदल दिया जाए। सौभाग्य से फिक्स सरल है: मीडिया प्रश्नों के लिए इकाइयों का उपयोग करेंem ।

प्रसंग स्विचिंग

यदि आप विभिन्न विभिन्न परियोजनाओं के बीच स्विच करते हैं, तो यह बहुत संभव है कि स्पष्ट फ़ॉन्ट-आकार में remभिन्न मूल्य होंगे। एक परियोजना में, आप एक स्पष्ट आकार का उपयोग कर सकते हैं 10pxजहां एक अन्य परियोजना में स्पष्ट आकार हो सकता है 1px। यह भ्रामक हो सकता है और मुद्दों का कारण बन सकता है।

यहाँ मेरी एकमात्र सिफारिश एक स्पष्ट आकार में 62.5%बदलने के remलिए साथ रहना है 10px, क्योंकि यह मेरे अनुभव में अधिक सामान्य रहा है।

सीएसएस पुस्तकालयों को साझा किया

यदि आप सीएसएस लिख रहे हैं, तो आप ऐसी साइट पर उपयोग करने जा रहे हैं जिसे आप नियंत्रित नहीं करते हैं, जैसे कि एक एम्बेडेड विजेट के लिए, वास्तव में यह जानने का कोई अच्छा तरीका नहीं है कि स्पष्ट आकार क्या remहोगा। अगर ऐसा है, तो बेझिझक इस्तेमाल करते रहें px।

यदि आप अभी भी उपयोग करना चाहते हैं rem, तो स्पष्ट आकार के लिए स्केलिंग को ओवरराइड करने के लिए एक चर के साथ स्टाइलशीट के सैस या लेस संस्करण को जारी करने पर विचार करें rem।

_{* मैं किसी को भी उपयोग करने से दूर नहीं करना चाहता rem, लेकिन मैं आधिकारिक तौर पर पुष्टि नहीं कर पाया कि हर ब्राउज़र 16pxडिफ़ॉल्ट रूप से उपयोग करता है। आप देखते हैं, बहुत सारे ब्राउज़र हैं और यह सब एक ब्राउज़र के लिए इतना कठिन नहीं है कि कभी भी, थोड़ा सा कहे 15pxया कहे 18px। परीक्षण में, हालांकि मैंने एक भी उदाहरण नहीं देखा है, जहां डिफ़ॉल्ट सेटिंग्स का उपयोग करके सिस्टम में डिफ़ॉल्ट सेटिंग्स का उपयोग करने वाले ब्राउज़र के अलावा कोई मूल्य नहीं था 16px। यदि आपको ऐसा कोई उदाहरण मिलता है, तो कृपया इसे मेरे साथ साझा करें।}

— zzzzBov
स्रोत

मुझे पता है कि यह देर से लेकिन, मुझे REM का उपयोग करने का तरीका पसंद है, लेकिन मुझे रेम का उपयोग करने में सबसे अधिक समस्या है, जब मैं matrix()जावास्क्रिप्ट का उपयोग करता हूं जो कि मैट्रिक्स अनुवाद मूल्यों का उपयोग कर रहा है px(मुझे गलत होने पर सही बताएं), और मैं इसके साथ बहुत भ्रमित हूं ।

— आम्रपांडा

3

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

— zzzzBov

मैं देख रहा हूं, इसलिए मुझे getComputedStyle()परिणाम देना है, लेकिन परिणाम हमेशा पिक्सेल पर होता है, इसलिए मुझे परिणाम को remमूल्य (जैसे 16) से विभाजित करना होगा । CMIIW

— एम्परसैंड

@Ampersanda केवल तभी यदि आप वास्तव में एक remमान उत्पन्न कर रहे हैं , यदि आपके पास पहले से ही सही pxमूल्य है, तो उन remचीजों के लिए इकाइयों में स्विच करने की कोई आवश्यकता नहीं है जो पहले से ही दिए गए संदर्भ के लिए गणना की जाती हैं।

— zzzzBov

1rem बराबर 1px है, इससे क्रोम के न्यूनतम फ़ॉन्ट-आकार के कारण परेशानी होती है: stackoverflow.com/questions/44378664/… stackoverflow.com/questions/24200797/…

— पॉल

44

यह लेख बहुत अच्छी तरह से पेशेवरों और विपक्ष के वर्णन करता है px, emऔर rem।

लेखक आखिरकार यह निष्कर्ष निकालता है कि सबसे अच्छा तरीका शायद दोनों का उपयोग करना है pxऔर पहले पुराने ब्राउज़रों के लिए remघोषणा करना pxऔर remनए ब्राउज़रों के लिए पुन : घोषणा करना है:

html { font-size: 62.5%; } 
body { font-size: 14px; font-size: 1.4rem; } /* =14px */
h1   { font-size: 24px; font-size: 2.4rem; } /* =24px */

— उज़िन
स्रोत

1

हाँ, यह वही है जो मुझे पहली बार रीमेक में दिलचस्पी है। दो चीजें जो मुझे समझ में नहीं आती हैं: वह केवल फोंट के लिए माप की एक इकाई के रूप में सलाह देता है (तत्व नहीं), और अगर मैं उसे सही ढंग से समझता हूं कि उपयोग करने का एकमात्र वास्तविक कारण (आर) एम है तो आईई उपयोगकर्ता पाठ का आकार बदल सकते हैं?

1

@ सैमुअल मैं ऐसा मानता हूं। यदि पाठ आकार बदलने के लिए नहीं, मेरा मानना है कि हम उपयोग करना पसंद करेंगे px। तत्वों के लिए इकाई के रूप में, चिपके रहना pxबेहतर होगा क्योंकि आप आमतौर पर तत्वों को सटीक रूप से आकार देना चाहते हैं।

— uzyn

लेकिन अगर आप ऐसा करते हैं, तो आधार फ़ॉन्ट-आकार को फिर से परिभाषित करने वाला कोई भी ब्राउज़र आपके लेआउट को सही करेगा? हर चीज के लिए रेम क्यों नहीं?

1

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

— संलयन

3

इस बात की कोई गारंटी नहीं है कि 62.5% = 10px जैसे मूल्य हैं। यह केवल तभी सही होता है जब ब्राउज़र का डिफ़ॉल्ट फ़ॉन्ट आकार 16px पर सेट किया गया हो। जबकि यह डिफ़ॉल्ट है, इसकी गारंटी नहीं है।

— cimmanon

7

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

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

तो, कुल मिलाकर, अपने आप से पूछें कि क्या यह इसके लायक है - यह कितना महत्वपूर्ण और संभावना है कि आप सीएसएस के भीतर पूरे दस्तावेज़ के "ज़ूम स्तर" को बदल दें?

कुछ मामलों के लिए यह हाँ है, कुछ मामलों के लिए यह नहीं होगा।

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

ध्यान रखें कि अपने CSS को रेक्स (जावास्क्रिप्ट एक और कहानी है) में बदलना (या बदलना) आसान है, क्योंकि CSS कोड के निम्नलिखित दो ब्लॉक एक ही परिणाम उत्पन्न करेंगे:

html {
}

body {
  font-size:14px;
}

.someElement {
  width: 12px;
}

html {
  font-size:1px;
}

body {
  font-size:14rem;
}

.someElement {
  width: 12rem;
}

— रॉल्फ
स्रोत

6

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

नीचे gif में बाईं ओर पाठ फ़ॉन्ट आकार REM इकाई का उपयोग करके सेट किया गया है, जबकि दाईं ओर फ़ॉन्ट PX इकाई द्वारा निर्धारित किया गया है।

जैसा कि आप देख सकते हैं कि जब मैं वेबपेज के डिफ़ॉल्ट फ़ॉन्ट-आकार का आकार बदलता हूं, तो REM स्वचालित रूप से ऊपर / नीचे स्केलिंग करता है। (नीचे-दाएं छोर)

एक वेबपेज का डिफ़ॉल्ट फ़ॉन्ट-आकार 16px है जो 1 रेम (केवल डिफ़ॉल्ट एचटीएमएल पेज के लिए html{font-size:100%}) के बराबर है, इसलिए, 1.25rem 20px के बराबर है।

पुनश्च: और कौन REM का उपयोग कर रहा है? सीएसएस चौखटे! बूटस्ट्रैप 4, बुलमा सीएसएस आदि की तरह, तो बेहतर इसके साथ मिलता है।

— JerryGoyal
स्रोत

3

josh3736 का उत्तर एक अच्छा है, लेकिन 3 साल बाद प्रतिरूप प्रदान करने के लिए:

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

मुझे लगता है कि यह अभी भी pxकुछ छवियों के लिए या कुछ लेआउट तत्वों के लिए इकाइयों का उपयोग करने के लिए समझ में आता है जो डिजाइन के पैमाने की परवाह किए बिना हमेशा एक ही आकार होना चाहिए।

Caniuse.com ने कहा हो सकता है कि जब josh3736 ने 2012 में अपना जवाब पोस्ट किया था, तब केवल 75% ब्राउज़र थे, लेकिन 27 मार्च तक उन्होंने 93.78% समर्थन का दावा किया । केवल IE8 उनके द्वारा ट्रैक किए गए ब्राउज़रों के बीच इसका समर्थन नहीं करता है।

— जोशुआ कारमोडी
स्रोत

1

Only IE8 doesn't support it among the browsers they track.है ना? लिंक किए गए पृष्ठ में कहा गया है कि "IE9 और IE10 फ़ॉन्ट शॉर्टहैंड संपत्ति में या छद्म तत्वों पर उपयोग किए जाने पर रेम इकाइयों का समर्थन नहीं करते हैं। IE9, 10 और 11 का समर्थन रेम इकाइयाँ तब नहीं करतीं जब छद्म तत्वों के बाद: पहले और बाद में उपयोग की जाने वाली लाइन-ऊँची संपत्ति में उपयोग किया जाता है। Chrome में पृष्ठ को ज़ूम आउट करने पर बॉर्डर आकार में गायब हो जाते हैं। सैमसंग नोट II एंड्रॉइड 4.3 पर सैमसंग नोट 2 और सैमसंग गैलेक्सी टैब 2 पर काम नहीं करता है। Chrome 31-34 और क्रोम-आधारित Android (जैसे 4.4) में फ़ॉन्ट आकार का बग होता है जब रूट तत्व का प्रतिशत-आधारित आकार होता है। ”

— ई-सुशी

इसके अलावा, as of March 27 they claim 93.78% support.इस टिप्पणी को लिखने के समय, कैनिअस केवल 91.79 % पूर्ण ब्राउज़र समर्थन दिखाता है। आपके प्रतिशत को देखते हुए, मुझे पूरा यकीन है कि आपने छोटी गाड़ी के ब्राउज़र समर्थन को भी शामिल किया है (वर्तमान में 2.8% पर, जिसे एक आशावादी 94.6% समग्र कवरेज के रूप में व्याख्या किया जा सकता है - लेकिन तथ्य यह है कि उन 2.8% छोटी गाड़ी के साथ आते हैं, अपूर्ण या पूरी तरह से। असफल समर्थन ... जैसा कि मेरी पिछली टिप्पणी में उल्लेख किया गया है: प्रत्येक बग विभिन्न ब्राउज़र संस्करण और ऑपरेटिंग सिस्टम संयोजनों का परिणाम है।) आप तदनुसार अपना उत्तर सही करना चाहते हैं ...

— ई-सुशी

1

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

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

— cereallarceny
स्रोत

ठीक है। लेकिन उत्तरदायी डिजाइन ठीक उसी तरह से है जैसा कि आसानी से px इकाइयों के साथ किया जाता है (सिर्फ em के बजाय px पर आधारित अपने मीडिया प्रश्नों को लिखें)?

हालाँकि, यदि आप अपने फ़ॉन्ट-आकार को छोटा बनाना चाहते हैं, क्योंकि आपकी वेबसाइट की व्यूपोर्ट चौड़ाई छोटी हो जाती है, तो आप bodyफ़ॉन्ट-आकार को बदल सकते हैं और इसके साथ सब कुछ बदल जाता है।

— १६:०en पर cereallarceny

मैं वास्तव में ब्राउज़र समर्थन के बारे में चिंतित नहीं हूं। मैं सभी आकारों के लिए केवल एक फ़ॉलबैक px आकार शामिल करूंगा, ताकि पुराने ब्राउज़रों के पास व्याख्या करने के लिए कुछ हो।

फिर रेम का उपयोग करके प्रगतिशील तरीके से जाएं। जब तक आप एक वापसी प्रदान करते हैं, तब तक मुझे कोई नुकसान नहीं होता है। मेरे लिए हालांकि यह सिर्फ अतिरिक्त काम की तरह लगता है, लेकिन शायद आपकी स्थिति में नहीं।

— cereallarceny

0

ptके समान है rem, जिसमें यह अपेक्षाकृत स्थिर है, लेकिन लगभग हमेशा डीपीआई-स्वतंत्र, यहां तक कि जब गैर-अनुपालन वाले ब्राउज़र pxडिवाइस-निर्भर फैशन में व्यवहार करते हैं । remरूट एलिमेंट के फॉन्ट साइज के साथ बदलता रहता है, लेकिन आप इसे अपने आप करने के लिए Sass / Compass जैसी किसी चीज का इस्तेमाल कर सकते हैं pt।

यदि आपके पास यह था:

html {
    font-size: 12pt;
}

फिर 1remहमेशा रहेगा 12pt। remऔर emकेवल उन उपकरणों के रूप में स्वतंत्र हैं, जिन पर वे भरोसा करते हैं; कुछ ब्राउज़र कल्पना के अनुसार व्यवहार नहीं करते हैं, और pxवस्तुतः व्यवहार करते हैं । वेब के पुराने दिनों में भी, 1 अंक को लगातार 1/72 इंच माना जाता था - यानी एक इंच में 72 बिंदु होते हैं।

यदि आपके पास एक पुराना, गैर-अनुरूप ब्राउज़र है, और आपके पास है:

html {
    font-size: 16px;
}

तब 1remडिवाइस पर निर्भर होने जा रहा है। उन तत्वों के लिए जो htmlडिफ़ॉल्ट रूप से इनहेरिट होंगे , 1emउपकरण-निर्भर भी होंगे। 12ptहोगा उम्मीद है कि : गारंटी स्वतंत्र यंत्र बराबर 16px / 96px * 72pt = 12ptहै, जहां 96px = 72pt = 1in।

यदि आप विशिष्ट इकाइयों से चिपके रहना चाहते हैं तो गणित को करना बहुत जटिल हो सकता है। उदाहरण के लिए, .75em of html = .75rem = 9ptऔर .66em of .75em of html = .5rem = 6pt। अच्छा व्यवहार:

ptनिरपेक्ष आकारों के लिए उपयोग करें । यदि आपको वास्तव में रूट एलीमेंट के सापेक्ष गतिशील होने की आवश्यकता है, तो आप सीएसएस से बहुत अधिक पूछ रहे हैं; आपको ऐसी भाषा की आवश्यकता है जो CSS / Sass / SCSS की तरह संकलित हो।
emसापेक्ष आकार के लिए उपयोग करें । यह कहना बहुत आसान है, "मैं चाहता हूं कि बाईं ओर का मार्जिन किसी पत्र की अधिकतम चौड़ाई के बारे में हो," या, "इस तत्व के पाठ को अपने परिवेश से थोड़ा बड़ा करें।" <h1>एक अच्छा तत्व है, जिस पर एक फ़ॉन्ट आकार का उपयोग करना है, क्योंकि यह विभिन्न स्थानों में दिखाई दे सकता है, लेकिन हमेशा पास के पाठ से बड़ा होना चाहिए। इस तरह, आपके पास लागू होने वाले प्रत्येक वर्ग के लिए एक अलग फ़ॉन्ट आकार नहीं होना चाहिए h1: फ़ॉन्ट आकार स्वचालित रूप से अनुकूलित हो जाएगा।
pxबहुत छोटे आकार के लिए उपयोग करें । बहुत छोटे आकार में, pt96 डीपीआई में कुछ ब्राउज़रों में धुंधली हो सकती है, क्योंकि ptऔर pxकाफी लाइन अप नहीं करते हैं। यदि आप बस एक पतली, एक-पिक्सेल सीमा बनाना चाहते हैं, तो कहें। यदि आपके पास उच्च-डीपीआई डिस्प्ले है, तो परीक्षण के दौरान यह आपके लिए स्पष्ट नहीं होगा, इसलिए किसी बिंदु पर सामान्य 96-डीपीआई डिस्प्ले का परीक्षण करना सुनिश्चित करें।
हाई-डीपीआई डिस्प्ले पर चीजों को फैंसी बनाने के लिए सबपिक्सल में डील न करें। कुछ ब्राउज़र इसका समर्थन कर सकते हैं - विशेष रूप से उच्च-डीपीआई डिस्प्ले पर - लेकिन यह एक नो-नो है। अधिकांश उपयोगकर्ता बड़े और स्पष्ट पसंद करते हैं, हालांकि वेब ने हमें डेवलपर्स को सिखाया है अन्यथा। यदि आप अपने उपयोगकर्ताओं के लिए अत्याधुनिक स्क्रीन के साथ विस्तारित विवरण जोड़ना चाहते हैं, तो आप वेक्टर ग्राफिक्स (पढ़ें: एसवीजी) का उपयोग कर सकते हैं, जो आपको वैसे भी करना चाहिए।

— Zenexer
स्रोत

1

मुद्रित मीडिया के लिए pt है और स्क्रीन के लिए कभी भी उपयोग नहीं किया जाना चाहिए

— sf

@ एसएफ सीएसएस ने पीटी और पीएक्स को परिभाषित किया है कि वे हमेशा समान अनुपात के होते हैं, इसके बावजूद उन शब्दों का तकनीकी रूप से सटीक उपयोग नहीं किया जाता है (72pt = 96px = 1in)। वास्तव में, CSS में, px वास्तव में एक एकल डिवाइस पिक्सेल नहीं है। मेरी स्क्रीन पर, 1px 2 डिवाइस पिक्सेल है। पीटी ओवर पीएक्स का उपयोग करने का लाभ यह है कि आप आसानी से पाठ से संबंधित आकारों के सापेक्ष तत्व आकार निर्दिष्ट कर सकते हैं।

— ज़ेनेक्सर

-2

आधा (लेकिन केवल आधा) भोंपू जवाब (अन्य आधा नौकरशाही की वास्तविकता का कड़वा तिरस्कार है):

Vh का प्रयोग करें

सब कुछ हमेशा ब्राउज़र विंडो के आकार का होता है।

हमेशा स्क्रॉल को नीचे की तरफ, कभी भी साइड की ओर न होने दें।

स्थैतिक चौड़ाई को 50vh पर सेट करें, और कुछ भी तैरता नहीं है या माता-पिता के विभाजन से बाहर नहीं निकलता है। और केवल तालिकाओं का उपयोग करने की शैली ताकि सब कुछ यथोचित रूप से अपेक्षित रूप से आयोजित हो। उपयोगकर्ता द्वारा किए जा सकने वाले किसी भी ctrl +/- गतिविधि को पूर्ववत करने के लिए एक जावास्क्रिप्ट फ़ंक्शन शामिल करें।

हर कोई आपसे नफरत करेगा, सिवाय उन लोगों के जो आपको बातें बनाने के लिए कहते हैं कि उनका मजाक उड़ाया जाए, और वे परमानंद होंगे। और हर कोई जानता है कि उनकी राय केवल वही है जो मायने रखती है।

— liljoshu
स्रोत

-3

हाँ। या, बल्कि, नहीं।

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

अपडेट करें:

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

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

— महंगाई भत्ते।
स्रोत

तो आपका जवाब है कि इससे कोई फर्क नहीं पड़ता? या क्या कुछ ऐसी परिस्थितियाँ हैं जिनमें आप एक को दूसरे से अधिक महत्व देते हैं? और यदि हां, तो किन स्थितियों में ऐसा होगा?

@ शमूएल हाँ, ऐसे समय हो सकते हैं जब आप एक या दूसरे का उपयोग करना चाहते हैं। मैंने अधिक जानकारी के साथ अपना उत्तर अपडेट कर दिया है।

— डीए।

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

— डीए।

क्यों " एम के [...] अच्छा है अगर आप खरोंच से शुरू कर सकते हैं और एक आधार फ़ॉन्ट आकार का उपयोग करना चाहते हैं और उसके सापेक्ष सब कुछ बना सकते हैं। " (R) em का px पर क्या लाभ है? क्या यह ऐसा है कि IE उपयोगकर्ता पाठ का आकार बदल सकते हैं, या px पर अन्य लाभ हैं (जो अधिक सरल लगता है)?

EM और REM का समान लाभ है: आप HTML या BODY को एक विशिष्ट फ़ॉन्ट आकार (10px कह सकते हैं) और फिर बाकी सब कुछ EM या REM के रूप में सेट कर सकते हैं। इस तरह, यदि आप सभी प्रकार को आनुपातिक रूप से बड़ा बनाना चाहते हैं, तो आप बस उस एक प्रारंभिक 10px शैली को 11px में बदल सकते हैं। 5 साल पहले यह अधिक उपयोगी था जब हम सभी अपने स्वयं के कस्टम जेएस आधारित फ़ॉन्ट का आकार बदलने का निर्माण कर रहे थे। इन दिनों, ब्राउज़र ज़ूमिंग (विशेष रूप से मोबाइल) में ऐसा बेहतर काम करते हैं कि मुझे इसका लाभ बहुत कम मिलता है। यदि आपको पीएक्स सरल लगता है, तो यह आपके लिए एक लाभ है और निश्चित रूप से पीएक्स के साथ जाने का एक वैध कारण है।

— डीए।

-4

उन्हें सिर्फ फोंट के लिए ही नहीं, बल्कि आगे बॉक्स, लाइन मोटाई और अन्य सामान के साथ भी इस्तेमाल किया जा सकता है, क्यों?

रखो बस उन्हें ही हैं जो ज़ूम के लिए ब्राउज़र में alt + और alt- कुंजियों के साथ एकरूपता में पैमाने पर हैं।

अन्य माप पैमाना, लेकिन उतनी सफाई से नहीं जितना कि उन्हें।

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

— shawty
स्रोत

3

लेकिन आजकल अधिकांश ब्राउज़र सभी पृष्ठ तत्वों को समान रूप से ज़ूम करते हैं (जब तक कि आप आधार फ़ॉन्ट आकार को समायोजित नहीं करते हैं), ताकि आधुनिक ब्राउज़र के लिए सही (आर) का उपयोग करने का लाभ सही न हो?

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

— श्वेत

(cont) दोनों दिशाओं में लागू गुणन के साथ, और परिणामस्वरूप कुछ मामलों में एक बुरी तरह से अनुपात को देखने का अनुपात दे सकता है।

— शावि

2

"रखो बस उन्हें केवल वही हैं जो ज़ूम करने के लिए ब्राउज़र में alt + और alt- कुंजियों के साथ सामंजस्य स्थापित करते हैं।" = यह गलत है।

— डीए।

ठीक है, इसलिए मैं इसे बेहतर शब्दों में लिख सकता था, सुधार के लिए मेरी पिछली टिप्पणी देखें।

— shawty

-5

EM केवल एक चीज है जो मीडिया प्रश्नों के लिए तराजू है जो +/- स्केलिंग को संभालती है, जो लोग हर समय करते हैं, न कि केवल अंधे लोग। यहां एक और बहुत अच्छी तरह से लिखा गया पेशेवर प्रदर्शन है कि यह क्यों मायने रखता है।

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

— robmuh
स्रोत

2

यह वास्तव में सही नहीं है। तु पुराने दिनों में, पिक्सल को IE के पुराने संस्करणों में ज़ूम नहीं किया जा सकता था। +/- अब सभी वर्तमान ब्राउज़रों में एक पूर्ण पृष्ठ ज़ूम करता है, इसलिए यह कोई समस्या नहीं है। इसके अलावा यह सवाल px के बजाय rems के बारे में है - em px नहीं।

— रिच ब्रेडशॉ

1

आप लोग मुझे हँसाएँ। क्या आपने पिक्सेल का उपयोग करके +/- का उपयोग करके अपनी साइट को स्केल करने की भी कोशिश की है? पिक्सल के बारे में लिखा जाना ज़ूम किया जाना गलत है। डाउन वोट मुझे तुम सब चाहिए वोट वास्तविकता नहीं बदलते हैं।

— १०:२०

1

शायद हम थोड़ा अलग चीजों के बारे में ले रहे हैं - कोई भी मौका जो आप अंतर प्रदर्शित करने के लिए एक साधारण डेमो डाल सकते हैं?

— रिच ब्रैडशॉ

मुझे नहीं लगता कि सवाल यह है कि मीडिया के प्रश्नों में किन इकाइयों का उपयोग किया जाए ...

— binki

क्या मुझे अपने CSS में px या rem value यूनिट्स का उपयोग करना चाहिए? [बन्द है]

तथ्यों

रॉय

इकाई अवलोकन

उपयोग करने पर px

उपयोग करने पर rem

उपयोगकर्ता वरीयताएँ का सम्मान करना

बदलते pxमूल्य

रुको, तो क्या पकड़ है?

मीडिया क्वेरी (उपयोग em)

प्रसंग स्विचिंग

सीएसएस पुस्तकालयों को साझा किया

उपयोग करने पर `px`

उपयोग करने पर `rem`

बदलते `px`मूल्य

मीडिया क्वेरी (उपयोग `em`)