लेकिन क्या होगा अगर कंटेनर व्यूपोर्ट (बॉडी) नहीं है?
एलेक्स द्वारा स्वीकार किए गए जवाब के तहत एक टिप्पणी में यह सवाल पूछा गया है ।
इस तथ्य का यह मतलब नहीं है vwकि उस कंटेनर के आकार के लिए कुछ हद तक उपयोग नहीं किया जा सकता है। अब सभी में किसी भी भिन्नता को देखने के लिए यह मानना होगा कि कंटेनर आकार में लचीला है। चाहे प्रत्यक्ष प्रतिशत के widthमाध्यम से या 100% माइनस मार्जिन के माध्यम से। बिंदु "मूट" हो जाता है यदि कंटेनर हमेशा सेट होता है, तो हम कहते हैं, 200pxचौड़ा - तो बस font-sizeउस चौड़ाई के लिए एक काम सेट करें ।
उदाहरण 1
एक लचीली चौड़ाई वाले कंटेनर के साथ, हालांकि, यह महसूस किया जाना चाहिए कि किसी तरह से कंटेनर अभी भी व्यूपोर्ट से दूर जा रहा है । जैसे, vwव्यूपोर्ट में उस प्रतिशत के आकार के अंतर के आधार पर सेटिंग को समायोजित करने का मामला है , जिसका अर्थ है माता-पिता के रैपर के आकार को ध्यान में रखना। इस उदाहरण को लें :
div {
width: 50%;
border: 1px solid black;
margin: 20px;
font-size: 16px;
/* 100 = viewport width, as 1vw = 1/100th of that
So if the container is 50% of viewport (as here)
then factor that into how you want it to size.
Let's say you like 5vw if it were the whole width,
then for this container, size it at 2.5vw (5 * .5 [i.e. 50%])
*/
font-size: 2.5vw;
}
यहाँ मान लें कि divयह एक बच्चा है body, यह 50%उस 100%चौड़ाई का है, जो इस मूल मामले में व्यूपोर्ट का आकार है। असल में, आप एक सेट करना चाहते हैं vwजो आपको अच्छा लगने वाला है। जैसा कि आप उपरोक्त सीएसएस सामग्री में मेरी टिप्पणी में देख सकते हैं, आप गणितीय रूप से पूर्ण व्यूपोर्ट आकार के संबंध में "सोच" सकते हैं, लेकिन आपको ऐसा करने की आवश्यकता नहीं है। कंटेनर के साथ पाठ "फ्लेक्स" जा रहा है क्योंकि कंटेनर व्यूपोर्ट के आकार के साथ फ्लेक्स कर रहा है। अद्यतन: यहाँ दो अलग-अलग आकार के कंटेनरों का एक उदाहरण है ।
उदाहरण 2
आप उस गणना के आधार पर व्यूपोर्ट साइज़िंग को सुनिश्चित करने में मदद कर सकते हैं। इस उदाहरण पर विचार करें :
html {width: 100%;} /* Force 'html' to be viewport width */
body {width: 150%; } /* Overflow the body */
div {
width: 50%;
border: 1px solid black;
margin: 20px;
font-size: 16px;
/* 100 = viewport width, as 1vw = 1/100th of that
Here, the body is 150% of viewport, but the container is 50%
of viewport, so both parents factor into how you want it to size.
Let's say you like 5vw if it were the whole width,
then for this container, size it at 3.75vw
(5 * 1.5 [i.e. 150%]) * .5 [i.e. 50%]
*/
font-size: 3.75vw;
}
साइज़िंग अभी भी व्यूपोर्ट से बाहर आधारित है, लेकिन कंटेनर के आकार के आधार पर सेट अप में ही है।
कंटेनर के आकार को गतिशील रूप से बदलना चाहिए ...
यदि कंटेनर तत्व के आकार को गतिशील रूप से उसके प्रतिशत संबंध को @mediaब्रेकपॉइंट या जावास्क्रिप्ट के माध्यम से बदलना समाप्त हो जाता है , तो जो भी आधार "लक्ष्य" पाठ आकार के लिए समान "संबंध" बनाए रखने के लिए पुनर्गणना की आवश्यकता होगी।
ऊपर # 1 उदाहरण लें। यदि या तो जावास्क्रिप्ट या चौड़ाई से divस्विच किया गया था , तो उसी समय, मीडिया गणना या जावास्क्रिप्ट द्वारा नई गणना में समायोजित करने की आवश्यकता होगी । यह टेक्स्ट आकार को उसी आकार में डाल देगा , जो व्यूपोर्ट साइज़िंग से मूल कंटेनर की "चौड़ाई" आधे से कम हो गया होगा, लेकिन अब इसकी स्वयं की प्रतिशत गणना में बदलाव के कारण कम हो गया है।25%@mediafont-size5vw * .25 = 1.2550%
एक चुनौती
उपयोग में CSS3 calc()फ़ंक्शन के साथ , गतिशील रूप से समायोजित करना मुश्किल हो जाएगा, क्योंकि यह फ़ंक्शन font-sizeइस समय उद्देश्यों के लिए काम नहीं करता है । यदि आप अपनी चौड़ाई बदल रहे हैं तो आप शुद्ध CSS 3 समायोजन नहीं कर सकते calc()। बेशक, मार्जिन के लिए चौड़ाई का मामूली समायोजन किसी भी बदलाव को वारंट करने के लिए पर्याप्त नहीं हो सकता है font-size, इसलिए यह कोई फर्क नहीं पड़ता।
font-size: 100%;इसका मतलब यह है कि पाठ का आकार 100% होता (यानी वह जिसे अपने माता-पिता से विरासत में मिला होता है)। डिफ़ॉल्ट रूप से वह 16px है। इसलिए यदि आप 50% का उपयोग करते हैं, तो यह फ़ॉन्ट-आकार होगा: 8px