Design a responsive site with em-based sizing

Sep 13, 2025
कैसे करना है

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

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

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

फ़ॉन्ट आकार इकाइयाँ [1 9]

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

इसका मतलब है कि एक ही मॉड्यूल को अलग-अलग कंटेनरों में रखना एम का अर्थ बदल सकता है। मॉड्यूल अप्रत्याशित होगा।

इससे बचने के लिए, हम आमतौर पर फ़ॉन्ट आकार के लिए एक अलग सापेक्ष इकाई का उपयोग करते हैं: rems। एक आरईएम (या 'रूट एम') विरासत फ़ॉन्ट आकार पर आधारित नहीं है, लेकिन पृष्ठ के मूल तत्व के फ़ॉन्ट आकार पर, & lt; html & gt; । इसका मतलब है कि इसका मूल्य पूरे पृष्ठ पर समान है। यह अधिक अनुमानित है, और अक्सर नियमित ईएमएस के लिए बेहतर है।

ईएमएस के साथ एक मॉड्यूल का निर्माण [1 9]

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

[3 9] Use rems on the outermost element to establish a known font size, then use ems to build based on that value

ज्ञात फ़ॉन्ट आकार स्थापित करने के लिए बाहरीतम तत्व पर rems का उपयोग करें, फिर उस मूल्य के आधार पर ईएमएस का उपयोग करें [4 9]

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

हम एक शीर्षक और एक शरीर के साथ एक पैनल का निर्माण करेंगे। मार्कअप इस तरह दिखता है: 

 & lt; div class = "पैनल" & gt;
  & lt; div class = "पैनल-हेडिंग" & gt;
    & lt; h3 & gt; ईएमएस की शक्ति देखें & lt; / h3 & gt;
  & lt; / div & gt;
  & lt; div class = "पैनल-बॉडी" और जीटी;
    उन तरीकों पर विचार करें जिनका आप रिश्तेदार का लाभ उठा सकते हैं
    आपके मॉड्यूल के गतिशील आकार के लिए इकाइयां।
  & lt; / div & gt;
& lt; / div & gt;

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

[6 9] .panel { फ़ॉन्ट आकार: 1rem; सीमा: 1 पीएक्स ठोस # 678; सीमा-त्रिज्या: 0.3em; बहुत ज्यादा गोपनीय; }

इसके बाद, आंतरिक तत्वों को शैलीबद्ध करें। हम पैडिंग के लिए ईएमएस का उपयोग करेंगे। फिर हम 20px गणना आकार का उत्पादन करते हुए, हमारे स्थानीय ईएम मूल्य के शीर्षक के 1.25 गुना बढ़ेगा।

[6 9]। पैनेल-हेडिंग { पैडिंग: 0.6em 1.2em; पृष्ठभूमि-रंग: #cde; सीमा-नीचे: 1px ठोस # 678; } । पैनेल-हेडिंग और जीटी; H3 { फ़ॉन्ट आकार: 1.25em; मार्जिन: 0; लेटर-रिक्ति: 0.03EM; } । पैनेल-बॉडी { पैडिंग: 0.6em 1.2em; }

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

गतिशील रूप से डिजाइन स्केलिंग [1 9]

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

[6 9]। पैनेल - बड़े {फ़ॉन्ट-आकार: 1.2rem; }

हम इसे बड़े बनाने के लिए एक पैनल में जोड़ते हैं: & lt; div class = "पैनल पैनल - बड़े" & gt; । यह एक ईएम की स्थानीय परिभाषा को बदल देगा, और इस प्रकार सीमावर्ती त्रिज्या और पैडिंग भी अपने बच्चे के तत्वों के फ़ॉन्ट आकार के साथ-साथ परिवर्तन भी बदल जाएगा। एक घोषणा के साथ, हमने मॉड्यूल के हर हिस्से का आकार बदल दिया है।

[9 3] A panel module, with paddings and border radius defined using ems

एक पैनल मॉड्यूल, एएमएस का उपयोग करके परिभाषित पैडिंग और सीमा त्रिज्या के साथ [4 9]

इसी तरह, हम एक छोटा संस्करण बना सकते हैं:

[6 9]। पैनेल - छोटे {फ़ॉन्ट आकार: 0.8rem; }

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

It is possible to base the size of everything inside the module on one value, then change that value to scale it all

एक मान पर मॉड्यूल के अंदर की हर चीज के आकार का आधार बनाना संभव है, फिर उस मान को सभी को स्केल करने के लिए बदलें [4 9]

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

इसे उत्तरदायी बनाना [1 9]

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

चलो एक और रिश्तेदार इकाई में लाते हैं: वीएच । इस इकाई का गणना मूल्य उपयोगकर्ता के स्क्रीन आकार से लिया गया है; यह व्यूपोर्ट की चौड़ाई के 1 प्रतिशत के बराबर है। यदि हम रूट फ़ॉन्ट आकार को परिभाषित करने के लिए वीएच इकाई का उपयोग करते हैं, तो यह स्वचालित रूप से उत्तरदायी रूप से स्केल करेगा, प्रबंधित मीडिया प्रश्न। रूट पर फ़ॉन्ट आकार सेट करें 2VW :

[6 9] एचटीएमएल { फ़ॉन्ट आकार: 2vw; }

दुर्भाग्यवश, प्रभाव थोड़ा मजबूत है। उदाहरण के लिए, आईफोन 6 पर, यह 5.5 पीएक्स पर गणना करेगा, जो बहुत छोटा है। इसी तरह, यह बड़ी स्क्रीन पर अनुचित रूप से बड़ा है। प्रभाव को नरम करने के लिए, हम सीएसएस का उपयोग कर सकते हैं कैल्क () समारोह:

[6 9] एचटीएमएल { फ़ॉन्ट आकार: कैल्क (0.6em + 1vw); }

अब फ़ॉन्ट आकार आंशिक रूप से एक स्थिर मूल्य से लिया गया है, और आंशिक रूप से एक उत्तरदायी से। यह एक बेहतर प्रभाव पैदा करता है। 0.6em न्यूनतम फ़ॉन्ट आकार के रूप में व्यवहार करता है। अब रूट ईएम औसत डेस्कटॉप स्क्रीन पर स्मार्टफ़ोन पर 13px से 21px तक तरल पदार्थ को स्केल करेगा।

आपके पृष्ठ के साथ स्केलेबल मॉड्यूल से बने, प्रत्येक को आरईएम मूल्य के आधार पर, और वे भी व्यूपोर्ट के साथ स्केल करेंगे। पृष्ठ को तीन-स्तरीय पदानुक्रम के साथ संरचित किया गया है; आप फ़ॉन्ट आकार में एक साधारण संपादन करके पूरे पृष्ठ, एक व्यक्तिगत मॉड्यूल, या एक तत्व का आकार बदल सकते हैं। ईएमएस और rems पर भरोसा करें, और ब्राउज़र आपके लिए काम का ख्याल रखेगा।

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

इस लेख को मूल रूप से शामिल किया गया था नेट पत्रिका अंक 288; यहां खरीदें

संबंधित आलेख:

  • 10 टाइपोग्राफी चालें हर डिजाइनर को पता होना चाहिए
  • टाइपोग्राफी और फोंट के लिए एक डिजाइनर गाइड
  • मास्टर सुलभ वेब टाइपोग्राफी
[1 9 2]

कैसे करना है - सर्वाधिक लोकप्रिय लेख

How to create interiors with Blender’s EEVEE

कैसे करना है Sep 13, 2025

Atypique-Studio: Poliigon.com से बनावट शामिल हैं - बनावट को पुनर्वितरि..

Work smart with your Zbrush UI

कैसे करना है Sep 13, 2025

कुछ भी जो हमारे दिमाग को उत्तेजित करता है, हमारी उत्पादकता को प्रभावित कर..

How to design with CSS shapes: An introduction

कैसे करना है Sep 13, 2025

प्रत्येक वेबसाइट का आधार पृष्ठ को छोटे तत्वों मे�..

How to create accessible web forms

कैसे करना है Sep 13, 2025

फॉर्म वेब का एक आवश्यक घटक हैं क्योंकि वे उपयोगकर..

How to paint an elven maiden

कैसे करना है Sep 13, 2025

इस ट्यूटोरियल में, मैं एक एल्वेन मेडेन के एक मनोर�..

How to rig a face for animation

कैसे करना है Sep 13, 2025

जब मैं पहली बार 2002 में 132 में चरित्र रिग बनाने के लि�..

Paint a mischievous hare in watercolour

कैसे करना है Sep 13, 2025

प्राणीशास्त्र, जानवरों और वन्यजीवन का अध्ययन करने के बाद हमेशा मेरे लिए �..

How to create stylised game artwork

कैसे करना है Sep 13, 2025

प्रथम व्यक्ति उत्तरजीविता वीडियो गेम की कला शैल�..

श्रेणियाँ