क्या मुझे सीएसएस मार्जिन को पिक्सेल या ईएमएस में परिभाषित करना चाहिए? क्यूं कर? कब?

Question

हम कुछ निम्न के समान नियमों के साथ एक सीएसएस फ़ाइल है:

.directory-result ul 
{ 
    margin-top: 20px; 
    width: 60em; 

} 

.about-text 
{ 
    margin-top: 1em; 
    margin-bottom: 1em; 
} 

सब कुछ ठीक काम कर रहा है, लेकिन हम मार्जिन टॉप मूल्यों के बीच विसंगतियों के बारे में विशेष रूप से सोच रहे हैं। एक 20px है और दूसरा 1em है।

किसके साथ जाने वाला सबसे अच्छा है? किस बिंदु का उपयोग करना है, यह तय करते समय मुझे क्या विचार करना चाहिए? धन्यवाद।

Answer 1

em इकाइयों का उपयोग पृष्ठ की बेहतर मापनीयता के लिए किया जाता है जब तत्वों का आकार पृष्ठ के पैमाने पर निर्भर करता है। यह पुराने ब्राउज़र (जैसे आईई 6) और मोबाइल प्लेटफ़ॉर्म के लिए विशेष रूप से महत्वपूर्ण है।

px इकाइयों का उपयोग पूर्ण मूल्यों के लिए किया जाता है, जबकि em विशेष तत्व के फ़ॉन्ट आकार के सापेक्ष है। 1em का अर्थ है एक फ़ॉन्ट-लाइन, उदा। आप इसका मतलब है कि 1em 12px

इसके अलावा के बराबर होगा, का उपयोग कर px लगता है आसान है क्योंकि आप सही मूल्य पता font-size 12px के साथ एक बॉक्स है, लेकिन em इकाइयों को अपने कंटेनर का मूल्य प्राप्त करती हैं।

<p>Text</p> 
<div class="box"> 
    <p>Lorem</p> 
</div> 

p { 
    font-size: 1.2em; 
} 

.box { 
    font-size: 1.2em; 
} 

इस मामले में, पहले <p> font-size बुनियादी font-size * 1.2 के बराबर होगा, और दूसरा <p> font-size * 1.2 * 1.2 के साथ प्रदर्शित करेगा।

Answer 2

वे मापने के केवल दो अलग-अलग तरीके हैं। एम फ़ॉन्ट आकार से जुड़ा हुआ है (परंपरागत रूप से, 1em किसी दिए गए टाइपफेस में अक्षर एम की लगभग चौड़ाई है), जबकि पीएक्स पिक्सेल है।

यदि आप एम का उपयोग करके सब कुछ बनाते हैं, तो उपयोगकर्ता तदनुसार स्केल करेगा जब उपयोगकर्ता अपने फ़ॉन्ट आकार को समायोजित करता है (उदाहरण के लिए आईई पेज> टेक्स्ट साइज मेनू का उपयोग करना)। यह work to a vertical rhythm को भी आसान बनाता है।

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

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

Answer 3

इसके अलावा यहां गहराई ट्यूटोरियल में एक बहुत अच्छा है:

px – em – % – pt – keyword

Answer 4

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

* (यह अगर उपयोगकर्ता के बजाय पाठ का आकार बढ़ाना (के रूप में फ़ायरफ़ॉक्स और क्रोम अब में डिफ़ॉल्ट है की पेज ज़ूम कोई फर्क नहीं रहता, और) IE में एक विकल्प।

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

Answer 5

इस उदाहरण में directory-result ul एक ब्लॉक का प्रतिनिधित्व करता है - कुछ प्रकार की सूची/मेनू जहां पिक्सेल आयाम काफी महत्वपूर्ण हैं। हम हमेशा em पर भरोसा नहीं कर सकते हैं जो टेक्स्ट आकार को परिभाषित करता है, क्योंकि अगर हमें कुछ पृष्ठभूमि छवि के कारण 20px स्पेस की आवश्यकता है - तो हमें 20px की आवश्यकता है, कोई समझौता नहीं है।

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

हालांकि एक जगह है, जहां em का उपयोग करने की सलाह दी जाती है - मैं टेक्स्ट ब्लॉक के बारे में बात कर रहा हूं। मैं आपके कोड about-text में अनुमान लगा रहा हूं अन्य टेक्स्ट के भीतर रखा गया है जहां 1em (टेक्स्ट की ऊंचाई) का शीर्ष/नीचे मार्जिन जोड़ना समझ में आता है। यह किसी भी टेक्स्ट एडिटर (यानी एमएस वर्ड में लाइन स्पेसिंग) की तरह है - टेक्स्ट

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

हर जगह जहां आप टेक्स्ट ब्लॉक के अंदर टेक्स्ट से निपटते हैं, और आप टेक्स्ट नोड्स के बीच भी अंतर जोड़ना चाहते हैं - em का उपयोग करें।