मैंने सुना है कि आपको अपनी स्टाइलशीट में आकारों और दूरियों को पिक्सेल के बजाय एमएम के साथ परिभाषित करना चाहिए। तो सवाल यह है कि सीएसएस में शैलियों को परिभाषित करते समय मुझे px के बजाय em का उपयोग क्यों करना चाहिए? क्या कोई अच्छा उदाहरण है जो इसे दिखाता है?
जवाबों:
यह कहना गलत है कि एक दूसरे की तुलना में बेहतर विकल्प है (या दोनों को कल्पना में अपना उद्देश्य नहीं दिया गया है)। यह भी ध्यान देने योग्य हो सकता है कि StackOverflow पीएक्स इकाइयों का व्यापक उपयोग करता है। यह खराब पसंद नहीं है स्पोइक को बताया गया था कि यह था।
इकाइयों की परिभाषा
पिक्सल (जैसे माप की एक पूर्ण इकाई है में , pt , या सेमी ) है कि यह भी एक के 1/96 होने में इकाई (क्यों बाद में अधिक)। क्योंकि यह एक पूर्ण माप है, इसका उपयोग किसी भी समय किया जा सकता है जब आप किसी चीज़ को किसी विशेष आकार के रूप में परिभाषित करना चाहते हैं, बजाय इसके कि यह किसी और चीज़ के समानुपातिक हो, जैसे ब्राउज़र विंडो या फ़ॉन्ट आकार।
अन्य सभी निरपेक्ष इकाइयों की तरह, px इकाइयाँ ब्राउज़र विंडो की चौड़ाई के अनुसार स्केल नहीं करती हैं। इस प्रकार, यदि आपका संपूर्ण पृष्ठ डिज़ाइन % के बजाय px जैसी पूर्ण इकाइयों का उपयोग करता है , तो यह ब्राउज़र की चौड़ाई के अनुकूल नहीं होगा। यह स्वाभाविक रूप से अच्छा या बुरा नहीं है, बस एक विकल्प है कि डिजाइनर को एक सटीक आकार का पालन करने और खिंचाव रहित बनाम खिंचाव के बीच बनाने की जरूरत है, लेकिन इस प्रक्रिया में सटीक आकार का पालन नहीं करना है। किसी साइट के लिए निश्चित आकार और लचीले आकार की वस्तुओं का मिश्रण होना विशिष्ट होगा।
निश्चित आकार के तत्वों को अक्सर पेज में शामिल करने की आवश्यकता होती है - जैसे विज्ञापन बैनर, लोगो या आइकन। यह सुनिश्चित करता है कि आपको लगभग हमेशा एक डिज़ाइन में कम से कम कुछ पीएक्स-आधारित माप की आवश्यकता होती है। उदाहरण के लिए, चित्र (डिफ़ॉल्ट रूप से) को ऐसे स्केल किया जाएगा कि प्रत्येक पिक्सेल आकार में 1 * px * हो, इसलिए यदि आप एक छवि के चारों ओर डिज़ाइन कर रहे हैं, तो आपको px इकाइयों की आवश्यकता होगी । यह सटीक फ़ॉन्ट आकार के लिए, और सीमा चौड़ाई के लिए भी बहुत उपयोगी है, जहां गोलाई के कारण यह अधिकांश स्क्रीन के लिए px इकाइयों का उपयोग करने के लिए सबसे अधिक समझ में आता है ।
सभी पूर्ण माप एक दूसरे से कठोरता से संबंधित हैं; जो है, 1in है हमेशा 96px , बस के रूप में 1in है हमेशा 72pt । (ध्यान दें कि स्क्रीन-आधारित मीडिया के बारे में बात करते समय 1in वास्तव में कभी भौतिक इंच नहीं होता है)। सभी निरपेक्ष माप 96ppi के नाममात्र स्क्रीन रिज़ॉल्यूशन और डेस्कटॉप मॉनीटर की नाममात्र देखने की दूरी को मानते हैं, और ऐसी स्क्रीन पर एक px स्क्रीन पर एक भौतिक पिक्सेल के बराबर और एक में होगा96 भौतिक पिक्सेल के बराबर होगा। उन स्क्रीन पर जो पिक्सेल घनत्व या देखने की दूरी में काफी भिन्न होती हैं, या यदि उपयोगकर्ता ने ब्राउज़र के ज़ूम फ़ंक्शन का उपयोग करके पृष्ठ को ज़ूम किया है, तो px अब आवश्यक रूप से भौतिक पिक्सेल से संबंधित नहीं होगा।
em एक पूर्ण इकाई नहीं है - यह एक इकाई है जो वर्तमान में चुने गए फ़ॉन्ट आकार के सापेक्ष है। जब तक आपने एक पूर्ण इकाई (जैसे पीएक्स या पीटी ) के साथ अपने फ़ॉन्ट आकार को सेट करके फ़ॉन्ट शैली को ओवरराइड नहीं किया है, तो यह उपयोगकर्ता के ब्राउज़र या ओएस में फोंट की पसंद से प्रभावित होगा यदि उन्होंने एक बना दिया है, तो इसका कोई मतलब नहीं है जहां आप विशेष रूप से इसे फ़ॉन्ट आकार तराजू के रूप में स्केल करना चाहते हैं, को छोड़कर लंबाई की एक सामान्य इकाई के रूप में उपयोग करना।
जब आप विशेष रूप से वर्तमान फ़ॉन्ट आकार पर निर्भर करने के लिए किसी चीज़ का आकार चाहते हैं तो उन्हें उपयोग करें ।
% एक सापेक्ष इकाई भी है, इस मामले में, किसी मूल तत्व की ऊँचाई या चौड़ाई के सापेक्ष। वे डिज़ाइन की कुल चौड़ाई जैसी चीज़ों के लिए px इकाइयों के लिए एक अच्छा विकल्प हैं यदि आपका डिज़ाइन इसके आकार को सेट करने के लिए विशिष्ट पिक्सेल आकारों पर निर्भर नहीं करता है।
आपके डिज़ाइन में % इकाइयों का उपयोग करने से आपका डिज़ाइन स्क्रीन / डिवाइस की चौड़ाई के अनुकूल हो सकता है, जबकि किसी निरपेक्ष इकाई जैसे px का उपयोग नहीं करता है।
मेरे पास एक उच्च रिज़ॉल्यूशन वाला एक छोटा लैपटॉप है और 120% टेक्स्ट जूम में फ़ायरफ़ॉक्स को चलाना है ताकि वह बिना स्क्वीटिंग के पढ़ सके।
कई साइटों को इससे समस्या है। लेआउट सभी विकृत हो जाता है, बटन में पाठ आधे में कट जाता है या पूरी तरह से गायब हो जाता है। यहां तक कि stackoverflow.com इससे ग्रस्त है:
ध्यान दें कि शीर्ष बटन और पृष्ठ टैब ओवरलैप कैसे होते हैं। अगर वे px के बजाय em इकाइयों का उपयोग करते, तो समस्या नहीं होती।
यह प्रश्न पूछने का कारण यह था कि मैं भूल गया था कि उन्हें कैसे उपयोग करना है क्योंकि यह सीएसएस में खुशी से हैक हो रहा था। लोगों ने ध्यान नहीं दिया कि मैंने प्रश्न को सामान्य रखा क्योंकि मैं फॉन्ट प्रति सेगिंग के बारे में बात नहीं कर रहा था। मुझे इस बात में अधिक दिलचस्पी थी कि पृष्ठ पर किसी भी दिए गए ब्लॉक तत्व पर शैलियों को कैसे परिभाषित किया जाए ।
जैसा कि हेनरिक पॉल और अन्य लोगों ने बताया कि तत्व में प्रयुक्त फ़ॉन्ट-आकार के लिए आनुपातिक है। यह पीएक्स में ब्लॉक तत्वों पर आकारों को परिभाषित करने के लिए एक आम बात है, हालांकि, ब्राउज़रों में फोंट को आकार देना आमतौर पर इस डिजाइन को तोड़ता है। फोंट का आकार बदलना आमतौर पर शॉर्टकट कुंजी के साथ किया जाता Ctrl+ +या Ctrl+ -। इसलिए एक अच्छा अभ्यास है कि आप एम की जगह इस्तेमाल करें।
यहाँ एक उदाहरण है। मान लें कि हमारे पास एक div-tag है जिसे हम एक स्टाइलिश तारीख बॉक्स में बदलना चाहते हैं, हमारे पास HTML-code हो सकता है जो इस तरह दिखता है:
<div class="date-box">
<p class="month">July</p>
<p class="day">4</p>
</div>एक साधारण कार्यान्वयन date-boxpx में कक्षा की चौड़ाई को परिभाषित करेगा :
* { margin: 0; padding: 0; }
p.month { font-size: 10pt; }
p.day { font-size: 24pt; font-weight: bold; }
div.date-box {
background-color: #DD2222;
font-family: Arial, sans-serif;
color: white;
width: 50px;
}हालाँकि, यदि हम अपने ब्राउज़र में टेक्स्ट को आकार देना चाहते हैं तो डिज़ाइन टूट जाएगा। पाठ बॉक्स के बाहर भी ब्लीड किया जाएगा जो लगभग उसी तरह होता है जो एसओ के डिजाइन के साथ होता है जैसा कि फ्लोडिन इंगित करता है। ऐसा इसलिए है क्योंकि बॉक्स चौड़ाई में उसी आकार का रहेगा जैसा कि वह लॉक है 50px।
एक आसान तरीका यह है कि इसके बजाय ems में चौड़ाई को परिभाषित करें:
div.date-box {
background-color: #DD2222;
font-family: Arial, sans-serif;
color: white;
width: 2.5em;
}
* { margin: 0; padding: 0; font-size: 10pt; }
// Initial width of date-box = 10 pt x 2.5 em = 25 pt
// Will also work if you used px instead of ptइस तरह से आपके पास डेट-बॉक्स पर एक द्रव डिजाइन है, यानी बॉक्स-डेट-बॉक्स के लिए परिभाषित फ़ॉन्ट-आकार के अनुपात में पाठ के साथ मिलकर आकार देगा। इस उदाहरण में, फ़ॉन्ट-आकार *को 10pt के रूप में परिभाषित किया गया है और उस फ़ॉन्ट आकार का 2.5 गुना आकार होगा। इसलिए जब आप ब्राउज़र में फोंट को आकार दे रहे होते हैं, तो बॉक्स में उस फॉन्ट-आकार का 2.5 गुना आकार होगा।
Ctrl+और Ctrl-किसी भी आधुनिक ब्राउज़र में पिक्सेल मानों को भी स्केल करेगा। कुछ समय से ऐसा ही चल रहा है।
थोमसट्रेटर से यहां शीर्ष मतदान का जवाब, एम के बारे में उनकी प्रतिक्रिया में सही है । लेकिन पिक्सेल के आकार के बारे में बहुत गलत है। इसलिए यह पुराना होने के बावजूद, मैं इसे पूर्वनिर्धारित नहीं होने दे सकता।
एक कंप्यूटर स्क्रीन आमतौर पर 96dpi नहीं है! (या पीपीआई, यदि आप पांडित्यपूर्ण होना चाहते हैं।)
एक पिक्सेल में एक निश्चित भौतिक आकार नहीं होता है।
(हां, यह केवल एक स्क्रीन के भीतर तय किया गया है , लेकिन अगली स्क्रीन में एक पिक्सेल सबसे अधिक बड़ा, या छोटा और निश्चित रूप से एक इंच का 1/96 नहीं है।)
सबूत
एक रेखा खींचना, 960 पिक्सेल लंबा। इसे एक भौतिक शासक के साथ मापें। क्या यह 10 इंच है? नहीं..?
अपने लैपटॉप को अपने टीवी से कनेक्ट करें। क्या लाइन 10 इंच की है? अभी तक नहीं?
अपने iPhone पर लाइन दिखाएं। अभी भी एक ही आकार? क्यों नहीं?
हेक ने 96dpi कंप्यूटर स्क्रीन मिथक का आविष्कार किया था?
(कुछ धर्म 72 डीपीआई मिथक के साथ काम करते हैं। लेकिन उतना ही गलत भी है।)
pxएक संदर्भ पिक्सेल के सापेक्ष आकार का है , न कि उन स्क्रीन पर पिक्सल, जिनके बारे में आप यहां हैं। आप इसे पसंद नहीं कर सकते हैं, लेकिन अपने शासक को बाहर निकालना इसे किसी तथ्य से कम नहीं बनाने वाला है, और न ही यह सवाल का जवाब देने में योगदान देता है। stackoverflow.com/questions/27382331/… "The reference pixel is the visual angle of one pixel on a device with a pixel density of 96dpi and a distance from the reader of an arm's length. For a nominal arm's length of 28 inches, the visual angle is therefore about 0.0213 degrees."
यह उन सभी चीज़ों के लिए उपयोग होता है जिन्हें फ़ॉन्ट आकार के अनुसार स्केल करना है।
यह उन ब्राउजरों पर विशेष रूप से उपयोगी है जो फॉन्ट साइज़ को स्केल करके जूम को लागू करते हैं। इसलिए यदि आप अपने सभी तत्वों को emउनके अनुसार आकार देते हैं ।
क्योंकि इम ( http://en.wikipedia.org/wiki/Em_(typography) ) उपयोग में वर्तमान में सीधे फ़ॉन्ट आकार के लिए आनुपातिक है। यदि फॉन्ट का आकार 16 अंक है, तो एक अंक 16 अंक है। यदि आपके फ़ॉन्ट का आकार 16 पिक्सेल है ( ध्यान दें : अंक के समान नहीं है), एक इम 16 पिक्सेल है।
इससे दो (संबंधित) चीजें होती हैं:
2pxकि 0.125em16 पिक्सेल फ़ॉन्ट के लिए है।
उदाहरण:
कोड: बॉडी {फ़ॉन्ट-आकार: 10px;} // 10 सभी आकारों को सही से नीचे रखें, इस मान को बदलें और शेष परिवर्तन उदाहरण के लिए इस मूल्य का 1.4 है।
...
तन
1
2
3
4
5
शरीर में मूल्य बदलने से शेष परिवर्तन स्वचालित रूप से आधार मूल्य का एक प्रकार हो सकता है ...
10 × 2 = 20 10 × 1.6 = 16 आदि
आपके पास आधार मान 8px हो सकता है ... इसलिए 8 × 2 = 16 8 × 1.6 = 12.8 // ब्राउज़र द्वारा गोल किया जा सकता है
एक बहुत ही व्यावहारिक कारण यह है कि IE 6 आपको फ़ॉन्ट का आकार बदलने नहीं देता है यदि यह px का उपयोग करके निर्दिष्ट किया गया है, जबकि यह तब होता है जब आप किसी रिश्तेदार इकाई जैसे कि em या प्रतिशत का उपयोग करते हैं। उपयोगकर्ता को फ़ॉन्ट का आकार बदलने की अनुमति नहीं देना पहुँच के लिए बहुत बुरा है। हालाँकि यह गिरावट में है, फिर भी बहुत सारे IE 6 उपयोगकर्ता हैं।
Page > Text Size। हालाँकि, IE7 ने पृष्ठ ज़ूम ( Page > Zoom) जोड़ा, जो पाठ सहित पूरे पृष्ठ को जाहिर करता है।
चित्रमय तत्वों के सटीक स्थान के लिए px का उपयोग करें। पोजिशनिंग करने के लिए em का उपयोग करें जैसे टेक्स्ट एलीमेंट जैसे लाइन-हाइट आदि के आसपास स्पेसिंग करना। px पिक्सेल सटीक है, इम उपयोग में फ़ॉन्ट के साथ गतिशील रूप से बदल सकते हैं
ईएम या प्रतिशत का उपयोग करने का मुख्य कारण उपयोगकर्ता को डिज़ाइन को तोड़ने के बिना पाठ का आकार बदलने की अनुमति देना है। यदि आप px में निर्दिष्ट फोंट के साथ डिज़ाइन करते हैं, तो वे आकार नहीं बदलते हैं (IE 6 और अन्य में) यदि उपयोगकर्ता पाठ का आकार चुनता है - बड़ा । विजुअल हैंडीकैप वाले उपयोगकर्ताओं के लिए यह बहुत बुरा है।
इस तरह के डिजाइनों के कई उदाहरणों और लेखों के लिए (इसमें से चुनने के लिए असंख्य हैं), ए लिस्ट के नवीनतम अंक के अलावा देखें: द्रव ग्रिड , पुराने लेख सीएसएस या डैन सेडरहोम के बुलेटप्रूफ वेब डिजाइन में टेक्स्ट का आकार कैसे दें ।
आपकी छवियों को अभी भी px आकारों के साथ प्रदर्शित किया जाना चाहिए, लेकिन, सामान्य तौर पर, यह आपके पाठ को px के साथ आकार देने के लिए अच्छा रूप नहीं माना जाता है।
जितना मैं व्यक्तिगत रूप से IE6 से घृणा करता हूं, यह वर्तमान में हमारी फॉर्च्यून 200 कंपनी में उपयोगकर्ताओं के थोक के लिए स्वीकृत एकमात्र ब्राउज़र है।
यदि आप फ़ॉन्ट आकार को निर्दिष्ट करने के लिए px का उपयोग करना चाहते हैं, तो एक सरल उपाय है, लेकिन फिर भी इसे अपनी CSS फ़ाइल में रखने से हमें प्रदान करने वाली प्रयोज्य चाहिए:
body {
font-size: 62.5%;
}अब आपको p(और अन्य) टैग इस तरह निर्दिष्ट करें:
p {
font-size: 0.8em; /* This is equal to 8px */
font-size: 1.0em; /* This is equal to 10px */
font-size: 1.2em; /* This is equal to 12px */
font-size: 2.0em; /* This is equal to 20px */
}और इसी तरह।
font-size: 10px। css-tricks.com/forums/discussion/1230/...
आप शायद IE6 चले गए (अपनी साइट से) फ़ॉन्ट आकार के लिए उन्हें उपयोग करना चाहते हैं। पेज जूमिंग (टेक्स्ट जूमिंग के विपरीत) मानक व्यवहार हो जाने पर Px ठीक हो जाएगा।
Traingamer ने पहले से ही neccessary लिंक प्रदान किए हैं ।
पिक्सेल एक पूर्ण इकाई है जबकि रेम / ईएम सापेक्ष इकाइयाँ हैं। अधिक के लिए: https://drafts.csswg.org/css-values-3/
आपको सापेक्ष इकाई का उपयोग तब करना चाहिए जब आप सिस्टम के फ़ॉन्ट आकार के अनुसार फ़ॉन्ट-आकार को अनुकूल बनाना चाहते हैं क्योंकि सिस्टम फ़ॉन्ट तत्व को रूट तत्व जो HTML तत्व है प्रदान करता है।
इस स्थिति में, जहां वेब पेज Google क्रोम में खुला है, HTML-तत्व के लिए फ़ॉन्ट-आकार क्रोम द्वारा सेट किया गया है, इसे रीम / इम इकाइयों के फोंट के साथ वेबपृष्ठों पर प्रभाव देखने के लिए इसे बदलने का प्रयास करें।
यदि आप pxफोंट के लिए इकाई के रूप में उपयोग करते हैं, तो फोंट का आकार परिवर्तन नहीं होगा, जबकि सिस्टम के फ़ॉन्ट आकार को बदलने पर फोंट rem/ emयूनिट के साथ फोंट का आकार बदल जाएगा।
इसलिए उपयोग करें px जब आप चाहते हैं कि आकार निश्चित होना चाहिए और उपयोग करें rem/ emजब आप चाहते हैं कि आकार अनुकूल हो / प्रणाली के आकार के लिए गतिशील हो।
सामान्य आम सहमति फ़ॉन्ट आकार के लिए प्रतिशत का उपयोग करना है, क्योंकि यह ब्राउज़रों / प्लेटफार्मों में अधिक सुसंगत है।
यह हास्यास्पद है, हालांकि, मैं हमेशा फ़ॉन्ट साइज़िंग के लिए pt का उपयोग करता था और मैंने माना कि सभी साइटें इसका इस्तेमाल करती हैं। आप सामान्य रूप से अन्य एप्लिकेशन (जैसे Word) में px आकारों का उपयोग नहीं करते हैं। मुझे लगता है कि ऐसा इसलिए है क्योंकि वे मुद्रण के लिए हैं - लेकिन आकार वेब ब्राउज़र में उसी तरह है जैसा कि Word ...
इसके बजाय em या px उपयोग रेम से बचें क्योंकि गणना किए गए मान को खोजना आसान है। लेकिन em और px के बीच, px बेहतर है क्योंकि em को डीबग करना कठिन है।
