हमने "व्हाई इम्स?" के बारे में बात की है। पहले यहां।
उन नए मूल्यों के लिए, मोज़िला डेवलपर नेटवर्क ईएमएस को समझाने का एक उत्कृष्ट काम करता है:
... एक em उस फॉन्ट के आकार के बराबर है जो प्रश्न में तत्व के माता-पिता पर लागू होता है। यदि आपने पृष्ठ पर कहीं भी फ़ॉन्ट का आकार निर्धारित नहीं किया है, तो यह ब्राउज़र डिफ़ॉल्ट है, जो संभवतः 16px है। तो, डिफ़ॉल्ट रूप से 1em = 16px, और 2em = 32px।
यदि आप अभी भी पीएक्स में सोचना पसंद करते हैं, लेकिन ईएम के लाभों की तरह, आपके कैलकुलेटर की जरूरत नहीं है, तो आप सैस को आपके लिए काम करने दे सकते हैं। Sass के साथ ems की गणना करने के कई तरीके हैं।
इनलाइन गणित:
h1 ( font-size: (32 / 16) * 1em; ) p ( font-size: (14 / 16) + 0em; )ध्यान दें: हमें Sass के लिए "* 1em" की आवश्यकता है ताकि यूनिट मूल्य को सही ढंग से जोड़ा जा सके। आप एक ही उद्देश्य के लिए "+ 0em" का भी उपयोग कर सकते हैं।
परिणाम:
h1 ( font-size: 2em; ) p ( font-size: 0.875em; )यह काम करता है, लेकिन हम इसे आसान बना सकते हैं।
उन्हें () Sass फ़ंक्शन
इस फ़ंक्शन को लिखने के लिए कुछ अलग तरीके हैं, यह वेब डिज़ाइन साप्ताहिक लेख से एक है:
$browser-context: 16; // Default @function em($pixels, $context: $browser-context) ( @return #($pixels/$context)em; )सुपर चालाक! यह फ़ंक्शन उन्हें वैल्यू में अपेंड करने के लिए सैस के स्ट्रिंग इंटरपोलेशन का उपयोग करता है। ध्यान दें कि $ संदर्भ पैरामीटर में $ ब्राउज़र-संदर्भ का डिफ़ॉल्ट मान है (इसलिए, जो भी आप इस चर को सेट करते हैं)। इसका मतलब यह है कि आपके सास में फ़ंक्शन को कॉल करते समय, आपको केवल $pixelsमान को परिभाषित करने की आवश्यकता होती है और गणित $browser-contextइस मामले में - 16px के सापेक्ष गणना की जाएगी ।
उदाहरण उपयोग:
h1 ( font-size: em(32); ) p ( font-size: em(14); )परिणाम:
h1 ( font-size: 2em; ) p ( font-size: 0.875em; )Sass वे से स्ट्रिंग प्रक्षेप के बजाय गणित का उपयोग करने वाला एक समान कार्य आसानी से हमारे स्ट्रिंग प्रक्षेप समारोह की तरह चर को स्वीकार करने के लिए संशोधित किया जा सकता है:
//un-modified @function calc-em($target-px, $context) ( @return ($target-px / $context) * 1em; ) // and modified to accept a base context variable $browser-context: 16; @function em($pixels, $context: $browser-context) ( @return ($pixels / $context) * 1em; )सास की यूनिटलेस () विधि का उपयोग कर एक और:
$browser-context: 16; @function em($pixels, $context: $browser-context) ( @if (unitless($pixels)) ( $pixels: $pixels * 1px; ) @if (unitless($context)) ( $context: $context * 1px; ) @return $pixels / $context * 1em; )यह हमें फ़ंक्शन कॉल में px इकाई को शामिल करने या न करने की अनुमति देता है।
h1 ( font-size: em(32); ) // is the same as: h1 ( font-size: em(32px); )