css - कंटेनर की चौड़ाई के आधार पर फ़ॉन्ट स्केलिंग




responsive-design font-size (18)

calc() , सीएसएस इकाइयों और गणित के साथ शुद्ध सीएसएस समाधान

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

मैं अंततः अलग-अलग इकाइयों के साथ calc() का उपयोग करके शुद्ध-सीएसएस समाधान प्राप्त करने आया। calc() लिए अपनी अभिव्यक्ति को काम करने के लिए आपको सूत्रों की कुछ बुनियादी गणितीय समझ की आवश्यकता होगी।

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

गणित के लिए

आपको चाहिये होगा:

  • कुछ व्यूपोर्ट में अच्छी तरह से समायोजित अनुपात, मैंने 320 पीएक्स का उपयोग किया, इस प्रकार मुझे 24 पीएक्स उच्च और 224 पीएक्स चौड़ा मिला तो अनुपात 9.333 है ... या 28/3
  • कंटेनर चौड़ाई, मेरे पास padding: 3em थी padding: 3em और पूर्ण चौड़ाई तो यह 100wv - 2 * 3em

एक्स कंटेनर की चौड़ाई है इसलिए इसे अपनी अभिव्यक्ति से प्रतिस्थापित करें या पूर्ण-पृष्ठ टेक्स्ट प्राप्त करने के लिए मान समायोजित करें। आर अनुपात आपके पास होगा। आप इसे कुछ व्यूपोर्ट में मान समायोजित करके, तत्व चौड़ाई और ऊंचाई का निरीक्षण करके और अपने मूल्यों के साथ बदलकर प्राप्त कर सकते हैं। इसके अलावा, यह width / heigth ;)

x = 100vw - 2 * 3em = 100vw - 6em
r = 224px/24px = 9.333... = 28 / 3

y = x / r
  = (100vw - 6em) / (28 / 3)
  = (100vw - 6em) * 3 / 28
  = (300vw - 18em) / 28
  = (75vw - 4.5rem) / 7

और धमाका! इसने काम कर दिया! मैंने लिखा

font-size: calc((75vw - 4.5rem) / 7)

मेरे हेडर पर और यह प्रत्येक व्यूपोर्ट में अच्छी तरह से समायोजित किया गया।

लेकिन ये कैसे काम करता है?

हमें यहां कुछ स्थिरांक चाहिए। 100vw मतलब व्यूपोर्ट की पूरी चौड़ाई है, और मेरा लक्ष्य कुछ पैडिंग के साथ पूर्ण-चौड़ाई वाला हेडर स्थापित करना था।

अनुपात। एक व्यूपोर्ट में चौड़ाई और ऊंचाई प्राप्त करने के साथ मुझे एक अनुपात मिला है, और अनुपात के साथ मुझे पता है कि ऊंचाई अन्य व्यूपोर्ट चौड़ाई में क्या होनी चाहिए। उन्हें हाथ से गणना करने में काफी समय लगेगा और कम से कम बैंडविड्थ ले लेंगे, इसलिए यह एक अच्छा जवाब नहीं है।

निष्कर्ष

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

मैं अपने पाठ में किसी असामान्य सम्मेलन से क्षमा चाहता हूं, मैं अंग्रेजी में मूल वक्ता नहीं हूं और एसओ उत्तरों लिखने के लिए काफी नया हूं।

संपादित करें : यह भी ध्यान दिया जाना चाहिए कि हमारे पास कुछ ब्राउज़रों में बुरा स्क्रॉलबार हैं। उदाहरण के लिए, फ़ायरफ़ॉक्स का उपयोग करते समय मैंने देखा कि 100vw अर्थ है व्यूपोर्ट की पूरी चौड़ाई, स्क्रॉलबार के तहत विस्तार (जहां सामग्री विस्तार नहीं हो सकती है!), इसलिए फुलविड्थ टेक्स्ट को सावधानी से मार्ज किया जाना चाहिए और अधिमानतः कई ब्राउज़रों और उपकरणों के साथ परीक्षण किया जाना चाहिए।

मुझे फ़ॉन्ट स्केलिंग के आसपास अपना सिर मिलना मुश्किल समय है।

मेरे पास वर्तमान में यह साइट 100% के बॉडी font-size के साथ है। हालांकि 100% क्या? ऐसा लगता है कि 16 पीएक्स पर गणना की जाती है।

मैं इस धारणा के तहत था कि 100% ब्राउज़र विंडो के आकार को किसी भी तरह से संदर्भित करेगा, लेकिन स्पष्ट रूप से ऐसा नहीं है क्योंकि यह हमेशा 16px है कि विंडो को मोबाइल चौड़ाई या पूर्ण उड़ा वाइडस्क्रीन डेस्कटॉप पर आकार दिया गया है या नहीं।

मैं अपने कंटेनर के संबंध में अपनी साइट स्केल पर टेक्स्ट कैसे बना सकता हूं? मैंने em का उपयोग करने की कोशिश की लेकिन यह या तो स्केल नहीं करता है।

मेरा तर्क यह है कि जब आप आकार .menuItem तो मेरे मेनू की तरह चीजें squished हो जाती हैं, इसलिए मुझे कंटेनर की चौड़ाई के संबंध में अन्य तत्वों के बीच .menuItem के पीएक्स font-size को कम करने की आवश्यकता है। (जैसे बड़े डेस्कटॉप पर मेनू में, 22px पूरी तरह से काम करता है। टैबलेट चौड़ाई पर ले जाएं और 16px अधिक उपयुक्त है।)

मुझे पता है कि मैं ब्रेकपॉइंट्स जोड़ सकता हूं, लेकिन मैं वास्तव में पाठ को अतिरिक्त ब्रेकपॉइंट्स के रूप में स्केल के रूप में स्केल करना चाहता हूं, अन्यथा मैं पाठ को नियंत्रित करने के लिए चौड़ाई में प्रत्येक 100px की कमी के लिए सैकड़ों ब्रेकपॉइंट्स के साथ समाप्त करूंगा।


लेकिन क्या होगा यदि कंटेनर व्यूपोर्ट (बॉडी) नहीं है?

स्वीकार किए गए उत्तर के तहत एलेक्स द्वारा टिप्पणी में यह सवाल पूछा गया है।

उस तथ्य का मतलब यह नहीं है कि vw उस कंटेनर के आकार के लिए कुछ हद तक उपयोग नहीं किया जा सकता है। अब किसी भी बदलाव को देखने के लिए यह मानना ​​होगा कि किसी भी तरह से कंटेनर आकार में लचीला है। चाहे प्रत्यक्ष प्रतिशत width या 100% शून्य मार्जिन के माध्यम से हो। यदि कंटेनर हमेशा सेट होता है, तो बिंदु "moot" बन जाता है, 200px लें, 200px चौड़ा - फिर बस उस चौड़ाई के लिए काम करने वाले font-size सेट करें।

उदाहरण 1

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

div {
    width: 50%;
    border: 1px solid black;
    margin: 20px;
    font-size: 16px;
    /* 100 = view port width, as 1vw = 1/100th of that
       So if the container is 50% of view port (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 का एक बच्चा है, यह 100% चौड़ाई का 50% है, जो इस मूल मामले में व्यूपोर्ट आकार है। असल में, आप एक 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 = view port width, as 1vw = 1/100th of that
       Here, the body is 200% of viewport, but the container is 50% 
       of view port, 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 ब्रेक पॉइंट्स या जावास्क्रिप्ट के माध्यम से @media बदल रहा है, तो जो भी आधार "लक्ष्य" को पाठ आकार के लिए "रिश्ते" को बनाए रखने के लिए @media आवश्यकता होगी।

ऊपर उदाहरण # 1 ले लो। यदि div को @media या जावास्क्रिप्ट द्वारा 25% चौड़ाई में स्विच किया गया था, तो उसी समय, font-size को मीडिया क्वेरी में या जावास्क्रिप्ट द्वारा 5vw * .25 = 1.25 की नई गणना में समायोजित करने की आवश्यकता होगी। यह पाठ आकार को उसी आकार में रखेगा जो मूल 50% कंटेनर की "चौड़ाई" को व्यूपोर्ट आकार से आधे से कम कर दिया गया था, लेकिन अब इसकी अपनी प्रतिशत गणना में बदलाव के कारण कम हो गया है।

एक चुनौती

उपयोग में CSS3 calc() फ़ंक्शन के साथ, गतिशील रूप से समायोजित करना मुश्किल हो जाएगा, क्योंकि यह फ़ंक्शन इस समय font-size उद्देश्यों के लिए काम नहीं करता है। इसलिए यदि आपकी चौड़ाई calc() पर बदल रही है तो आप शुद्ध CSS3 समायोजन नहीं कर सके। बेशक, मार्जिन के लिए चौड़ाई का मामूली समायोजन font-size में किसी भी बदलाव की गारंटी देने के लिए पर्याप्त नहीं हो सकता है, इसलिए इससे कोई फर्क नहीं पड़ता।


अपडेट किया गया क्योंकि मुझे नीचे वोट मिला।

यहां कार्य है:

document.body.setScaledFont = function(f) {
  var s = this.offsetWidth, fs = s * f;
  this.style.fontSize = fs + '%';
  return this
};

फिर अपने सभी दस्तावेज़ों को बाल तत्व फ़ॉन्ट आकार को em या% में रूपांतरित करें।

फिर मूल फ़ॉन्ट आकार सेट करने के लिए अपने कोड में ऐसा कुछ जोड़ें।

document.body.setScaledFont(0.35);
window.onresize = function() {
    document.body.setScaledFont(0.35);
}

http://jsfiddle.net/0tpvccjt/


अपने सीएसएस के अंदर जहां भी आपका डिज़ाइन ब्रेकिंग शुरू होता है, वहां 320px चौड़ाई को बदलने के नीचे इसे जोड़ने का प्रयास करें:

    @media only screen and (max-width: 320px) {

       body { font-size: 1em; }

    }

फिर फ़ॉन्ट की आकार को "पीएक्स" या "एम" में अपनी इच्छानुसार दें।


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

body{font-size:10px;}
.menu{font-size:2em;} /* that means 2*10px = 20px */
.menu li{font-size:1.5em;} /* that means 1.5*20px = 30px */

रेम हमेशा शरीर के सापेक्ष है

body{font-size:10px;}
.menu{font-size:2rem;} /* that means 2*10px = 20px */
.menu li{font-size:1.5rem;} /* that means 1.5*10px = 15px */

और आप एक स्क्रिप्ट बना सकते हैं जो आपके कंटेनर चौड़ाई के सापेक्ष फ़ॉन्ट आकार को संशोधित करेगा। लेकिन यह वही नहीं है जो मैं पुनः प्राप्त करूंगा। क्योंकि 900px चौड़ाई कंटेनर में उदाहरण के लिए आपके पास 12 पीएक्स फ़ॉन्ट-साइज वाला p तत्व होगा, मान लें। और आपकी विचारधारा पर जो 300 पीएक्स चौड़ाई कंटेनर पर 4 पीएक्स फ़ॉन्ट आकार पर बन जाएगा। निचली सीमा होनी चाहिए। मीडिया समाधानों के साथ एक और समाधान होगा, ताकि आप विभिन्न चौड़ाई के लिए फ़ॉन्ट सेट कर सकें।

लेकिन जिन समाधानों की मैं सिफारिश करता हूं वह एक जावास्क्रिप्ट लाइब्रेरी का उपयोग करना है जो आपको इससे मदद करता है। और FitText जो मैंने अभी तक पाया है।


इस विशेषता के साथ हमेशा अपना तत्व रखें :

जावास्क्रिप्ट: element.style.fontSize = "100%";

या

सीएसएस: style = "font-size: 100%;"

जब आप पूर्णस्क्रीन जाते हैं, तो आपके पास पहले से स्केल वैरिएबल गणना होनी चाहिए (स्केल> 1 या स्केल = 1)। फिर, पूर्णस्क्रीन पर:

document.body.style.fontSize = (scale * 100) + "%";

यह छोटे कोड के साथ अच्छी तरह से काम करता है।


एसवीजी के साथ समाधान:

<div style="width: 60px;">  
  <svg width="100%" height="100%" viewBox="0 -200 1000 300"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <text font-size="300" fill="black">Text</text>
  </svg>
</div>

https://jsfiddle.net/qc8ht5eb/


क्या आप इस तरह कुछ ढूंढ रहे हैं? =>
http://jsfiddle.net/sijav/dGsC9/4/
http://fiddle.jshell.net/sijav/dGsC9/4/show/
मैंने http://simplefocus.com/flowtype/ उपयोग किया है और यह बहुत अच्छा काम कर रहा है (हालांकि यह जेएस है और शुद्ध सीएसएस समाधान नहीं है)

$('body').flowtype({
 minFont : 10,
 maxFont : 40,
 minimum : 500,
 maximum : 1200,
 fontRatio : 70
});

खिड़की के बजाए फ़ॉन्ट आकार अपने कंटेनर को फिट करने के लिए, आकार (आकार resizeFont() फ़ंक्शन को मैंने इस प्रश्न में साझा किया है (अन्य उत्तरों का संयोजन, जिनमें से अधिकांश पहले से ही जुड़े हुए हैं) देखें। यह window.addEventListener('resize', resizeFont); का उपयोग करके ट्रिगर किया गया है window.addEventListener('resize', resizeFont);

वेनिला जेएस: कंटेनर फिट करने के लिए फ़ॉन्ट-कमाल का आकार बदलें

जे एस:

function resizeFont() {
  var elements  = document.getElementsByClassName('resize');
  console.log(elements);
  if (elements.length < 0) {
    return;
  }
  _len = elements.length;
  for (_i = 0; _i < _len; _i++) {
    var el = elements[_i];
    el.style.fontSize = "100%";
    for (var size = 100; el.scrollHeight > el.clientHeight; size -= 10) {
      el.style.fontSize = size + '%';
    }
  }
}

आप शायद vw / vh को फ़ॉलबैक के रूप में उपयोग कर सकते हैं, इसलिए आप जावास्क्रिप्ट का उपयोग करके गतिशील रूप से em या rem इकाइयों को असाइन करते हैं, यह सुनिश्चित करते हुए कि जावास्क्रिप्ट अक्षम होने पर फोंट विंडो पर स्केल करते हैं।

उस टेक्स्ट वाले सभी तत्वों को .resize क्लास लागू करें, .resize आप स्केल करना चाहते हैं।

खिड़की का आकार बदलने वाले ईवेंट श्रोता जोड़ने से पहले फ़ंक्शन को ट्रिगर करें। Then, any text which doesn't fit its container will be scaled down when the page loads, as well as when it is resized.

NOTE: The default font-size must be set to either em , rem or % to achieve proper results... and if the styling of your elements is too complex then the browser might crash if you start frantically resizing the window.


गतिशील पाठ के लिए, यह प्लगइन काफी उपयोगी है http://freqdec.github.io/slabText/ । बस सीएसएस जोड़ें

.slabtexted .slabtext
    {
    display: -moz-inline-box;
    display: inline-block;
    white-space: nowrap;
    }
.slabtextinactive .slabtext
    {
    display: inline;
    white-space: normal;
    font-size: 1em !important;
    letter-spacing: inherit !important;
    word-spacing: inherit !important;
    *letter-spacing: normal !important;
    *word-spacing: normal !important;
    }
.slabtextdone .slabtext
    {
    display: block;
    }

और लिपि

$('#mydiv').slabText();

मेरी परियोजनाओं में से एक में मैं क्या करता हूं, मेरी आवश्यकताओं के लिए फ़ॉन्ट आकार को समायोजित करने के लिए vw और vh के बीच एक "मिश्रण" है, उदाहरण के लिए:

font-size: calc(3vw + 3vh);

मुझे पता है कि यह ओप के सवाल का जवाब नहीं देता है, लेकिन शायद यह किसी और के लिए समाधान हो सकता है।


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

(function($) {

  // Reduces the size of text in the element to fit the parent.
  $.fn.reduceTextSize = function(options) {
    options = $.extend({
      minFontSize: 10
    }, options);

    function checkWidth(em) {
      var $em = $(em);
      var oldPosition = $em.css('position');
      $em.css('position', 'absolute');
      var width = $em.width();
      $em.css('position', oldPosition);
      return width;
    }

    return this.each(function(){
      var $this = $(this);
      var $parent = $this.parent();
      var prevFontSize;
      while (checkWidth($this) > $parent.width()) {
        var currentFontSize = parseInt($this.css('font-size').replace('px', ''));
        // Stop looping if min font size reached, or font size did not change last iteration.
        if (isNaN(currentFontSize) || currentFontSize <= options.minFontSize ||
            prevFontSize && prevFontSize == currentFontSize) {
          break;
        }
        prevFontSize = currentFontSize;
        $this.css('font-size', (currentFontSize - 1) + 'px');
      }
    });

  };

})(jQuery);

मैंने फ़ॉन्ट आकार के बजाय सीएसएस ट्रांसफॉर्म का उपयोग करके सरल स्केल फ़ंक्शन तैयार किया है। आप इसे किसी भी कंटेनर के अंदर उपयोग कर सकते हैं, आपको मीडिया प्रश्न आदि सेट करने की आवश्यकता नहीं है :)

ब्लॉग पोस्ट: https://blog.polarbits.co/2017/03/07/full-width-css-js-scalable-header/

कोड:

function scaleHeader() {
  var scalable = document.querySelectorAll('.scale--js');
  var margin = 10;
  for (var i = 0; i < scalable.length; i++) {
    var scalableContainer = scalable[i].parentNode;
    scalable[i].style.transform = 'scale(1)';
    var scalableContainerWidth = scalableContainer.offsetWidth - margin;
    var scalableWidth = scalable[i].offsetWidth;
    scalable[i].style.transform = 'scale(' + scalableContainerWidth / scalableWidth + ')';
    scalableContainer.style.height = scalable[i].getBoundingClientRect().height + 'px';
  }
}

कार्य डेमो: https://codepen.io/maciejkorsan/pen/BWLryj


यदि यह किसी के लिए सहायक है, तो इस धागे के अधिकांश समाधान टेक्स्ट को कई पंक्तियों में लपेट रहे थे, फॉर्म ई।

लेकिन फिर मैंने यह पाया, और यह काम किया:

https://github.com/chunksnbits/jquery-quickfit

उदाहरण का उपयोग:

$('.someText').quickfit({max:50,tolerance:.4})


यह सुपर व्यावहारिक नहीं हो सकता है, लेकिन यदि आप चाहते हैं कि फ़ॉन्ट माता-पिता का सीधा कार्य हो, बिना किसी जेएस के जो div / page के आकार को पढ़ने के लिए / लूप (अंतराल) सुनता है, तो ऐसा करने का एक तरीका है। Iframes। आईफ्रेम के भीतर कुछ भी व्यूपोर्ट के आकार के रूप में आईफ्रेम के आकार पर विचार करेगा। तो यह चाल सिर्फ एक आईफ्रेम बनाना है जिसकी चौड़ाई अधिकतम चौड़ाई है जिसे आप अपना टेक्स्ट चाहते हैं, और जिसकी ऊंचाई अधिकतम ऊंचाई के बराबर है * विशेष पाठ का पहलू अनुपात।

इस सीमा को अलग करना कि व्यूपोर्ट इकाइयां पाठ के लिए पैरेंट इकाइयों के साथ भी नहीं आ सकती हैं (जैसा कि,% आकार हर किसी की तरह व्यवहार करता है), व्यूपोर्ट इकाइयां एक बहुत ही शक्तिशाली टूल प्रदान करती हैं: न्यूनतम / अधिकतम आयाम प्राप्त करने में सक्षम होना । आप कहीं और नहीं कर सकते - आप यह नहीं कह सकते .. इस div की ऊंचाई माता-पिता की चौड़ाई * कुछ हो।

ऐसा कहा जा रहा है कि चाल vmin का उपयोग करने के लिए है, और iframe आकार सेट करने के लिए है ताकि [अंश] * ऊंचाई ऊंचाई एक अच्छा फ़ॉन्ट आकार है जब ऊंचाई सीमित आयाम है, और [अंश] * चौड़ाई है जब चौड़ाई है सीमित आयाम। यही कारण है कि ऊँचाई चौड़ाई और पहलू अनुपात का एक उत्पाद होना चाहिए।

मेरे विशेष उदाहरण के लिए, आपके पास है

.main iframe{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: calc(3.5 * 100%);
  background: rgba(0,0,0,0);
  border-style: none;
  transform: translate3d(-50%,-50%,0);
}

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

var rule = document.styleSheets[1].rules[4];
var iDoc = document.querySelector('iframe').contentDocument;
iDoc.styleSheets[0].insertRule(rule.cssText); 

आप छोटे फ़ंक्शन को लिख सकते हैं जो सीएसएस नियम / सभी सीएसएस नियम प्राप्त करता है जो टेक्स्ट क्षेत्र को प्रभावित करेंगे।

मैं कुछ साइकिल चलाने / जेएस सुनने के बिना इसे करने का एक और तरीका नहीं सोच सकता। वास्तविक समाधान ब्राउज़र के लिए मूल कंटेनर के फ़ंक्शन के रूप में टेक्स्ट स्केल करने का तरीका प्रदान करेगा और उसी vmin / vmax प्रकार की कार्यक्षमता भी प्रदान करेगा।

जेएस फिडल: https://jsfiddle.net/0jr7rrgm/3/ (लाल वर्ग को माउस पर लॉक करने के लिए एक बार क्लिक करें, रिलीज करने के लिए फिर से क्लिक करें)

बेवकूफ में अधिकांश जेएस सिर्फ मेरा कस्टम क्लिक-ड्रैग फ़ंक्शन है


FitText प्लगइन का उपयोग करने का प्रयास करें, क्योंकि व्यूपोर्ट आकार इस समस्या का समाधान नहीं है। बस पुस्तकालय जोड़ें

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script src="jquery.fittext.js"></script>

और पाठ के गुणांक सेटिंग्स द्वारा सही के लिए फ़ॉन्ट आकार बदलें:

$("#text_div").fitText(0.8);

आप टेक्स्ट के अधिकतम और न्यूनतम मान सेट कर सकते हैं:

$("#text_div").fitText(0.8, { minFontSize: '12px', maxFontSize: '36px' });

vw , em एंड सह का उपयोग करना। निश्चित रूप से काम करता है, लेकिन इमो को हमेशा ठीक-ट्यूनिंग के लिए मानव के स्पर्श की आवश्यकता होती है।

यहां एक स्क्रिप्ट है जिसे मैंने अभी @ tnt-rox ' answer आधार पर लिखा है जो मानव स्पर्श को स्वचालित करने की कोशिश करता है:

$('#controller').click(function(){
	$('h2').each(function(){
    var
      $el = $(this),
      max = $el.get(0),
      el = null
    ;
    max =
      max
    ? max.offsetWidth
    : 320
    ;
    $el.css({
      'font-size': '1em',
      'display': 'inline',
    });
    el = $el.get(0);

    el.get_float = function(){
      var
        fs = 0
      ;
      if (this.style && this.style.fontSize) {
        fs = parseFloat(this.style.fontSize.replace( /([\d\.]+)em/g, '$1' ));
      }
      return fs;
    };

    el.bigger = function(){
      this.style.fontSize = (this.get_float() +0.1) +'em';
    };


    while ( el.offsetWidth < max ) {
      el.bigger();
    }
    // finishing touch.
    $el.css({
      'font-size': ((el.get_float() -0.1) +'em'),
      'line-height': 'normal',
      'display': '',
    });
	});  // end of ( each )
});	// end of ( font scaling test )
div {
  width: 50%;
  background-color: tomato;
  font-family: 'Arial';
}

h2 {
  white-space: nowrap;
}

h2:nth-child(2) {
  font-style: italic;  
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="button" id="controller" value="Apply" />
<div>
  <h2>Lorem ipsum dolor</h2>
  <h2>Test String</h2>
  <h2>Sweet Concatenation</h2>
  <h2>Font Scaling</h2>
</div>

यह मूल रूप से फ़ॉन्ट आकार को 1em तक कम कर देता है और फिर अधिकतम चौड़ाई तक पहुंचने तक 0.1 तक बढ़ता जा रहा है।

jsFiddle


जावास्क्रिप्ट के बिना ऐसा करने का एक तरीका है!

आप एक इनलाइन svg का उपयोग कर सकते हैं। यदि आप इनलाइन हैं तो आप एक एसवीजी पर सीएसएस का उपयोग कर सकते हैं। आपको याद रखना होगा कि इस विधि का उपयोग करने का अर्थ है कि आपका एसवीजी इसके कंटेनर आकार का जवाब देगा।

निम्नलिखित समाधान का उपयोग करने का प्रयास करें ...

एचटीएमएल

<div>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360.96 358.98" >
      <text>SAVE $500</text>

  </svg>

</div>

सीएसएस

div {
  width: 50%; /* set your container width */
  height: 50%; /* Set your container height */

}

svg {
  width: 100%;
  height: auto;

}

text {
  transform: translate(40px, 202px);
  font-size: 62px;
  fill: #000;

}

उदाहरण: https://jsfiddle.net/k8L4xLLa/32/

कुछ और चमकदार चाहते हैं?

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

https://jsfiddle.net/k8L4xLLa/14/





font-size