css - কন্টেইনার প্রস্থ উপর ভিত্তি করে ফন্ট স্কেলিং




responsive-design font-size (20)

calc() , সিএসএস ইউনিট এবং গণিত সঙ্গে বিশুদ্ধ CSS সমাধান

এই ঠিক কি OP জিজ্ঞাসা না, কিন্তু কেউ এর দিন করতে পারে। এই উত্তরটি চামচ-খাওয়ানো সহজ নয় এবং বিকাশকারীর শেষের দিকে কিছু গবেষণার প্রয়োজন।

আমি বিভিন্ন ইউনিটগুলির সাথে calc() ব্যবহার করে calc() জন্য একটি calc() CSS সমাধান পেতে অবশেষে এসেছি। calc() জন্য আপনার অভিব্যক্তিটি কাজ করার জন্য আপনাকে সূত্রগুলির কিছু মৌলিক গাণিতিক বোঝার প্রয়োজন হবে।

যখন আমি এটি কাজ করেছিলাম, তখন আমি ডামে কিছু প্যাডিং কয়েকটি পিতা-মাতার সাথে একটি পূর্ণ-পৃষ্ঠা-প্রস্থ প্রতিক্রিয়াশীল শিরোনাম পেতে হয়েছিল। আমি এখানে আমার মান ব্যবহার করব, আপনার নিজের সাথে তাদের প্রতিস্থাপন।

গণিত যাও

আপনার প্রয়োজন হবে:

  • কিছু ভিউপোর্টে চমত্কারভাবে সমন্বয়কৃত অনুপাত, আমি 320px ব্যবহার করেছি, এইভাবে আমি 24px উচ্চ এবং 224px প্রশস্ত পেয়েছি তাই অনুপাত হল 9.333 ... অথবা 28/3
  • ধারক প্রস্থ, আমি padding: 3em ছিল padding: 3em 100wv - 2 * 3em এবং পূর্ণ প্রস্থ তাই এটি 100wv - 2 * 3em পেয়েছিলাম 100wv - 2 * 3em

X কন্টেইনারের প্রস্থ তাই আপনার নিজস্ব অভিব্যক্তি দিয়ে এটি প্রতিস্থাপন করুন অথবা পূর্ণ-পৃষ্ঠা পাঠ্য পেতে মানটি সামঞ্জস্য করুন। R আপনি অনুপাত হবে। আপনি কিছু ভিউপোর্টের মানগুলি সামঞ্জস্য করে, উপাদান প্রস্থ এবং উচ্চতা পরিদর্শন করে এবং আপনার নিজের মানগুলি দিয়ে প্রতিস্থাপন করে এটি পেতে পারেন। এছাড়াও, এটি 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 মানে ভিউপোর্টের সম্পূর্ণ প্রস্থ, এবং আমার লক্ষ্যটি কিছু প্যাডিংয়ের সাহায্যে পূর্ণ-প্রস্থের হেডার স্থাপন করা।

অনুপাত. এক ভিউপোর্টে একটি প্রস্থ এবং উচ্চতা পেতে আমার সাথে একটি অনুপাত পাওয়া যায়, এবং অনুপাতের সাথে আমি অন্য ভিউপোর্ট প্রস্থে উচ্চতা কত হওয়া উচিত তা জানি। হাত দিয়ে তাদের গণনা করা প্রচুর সময় নেয় এবং কমপক্ষে ব্যান্ডউইড প্রচুর পরিমাণে নেয় তবে এটি একটি ভাল উত্তর নয়।

উপসংহার

আমি আশ্চর্য হলাম কেন কেউ এটিকে খুঁজে বের করে নি এবং কিছু লোক এমনকি বলেছে যে এটি CSS এর সাথে বিচ্ছিন্ন হওয়া অসম্ভব। আমি উপাদানগুলি সামঞ্জস্য করতে জাভাস্ক্রিপ্ট ব্যবহার করতে পছন্দ করি না, তাই আমি আরো খনন ছাড়া JS বা এমনকি jQuery উত্তরগুলি গ্রহণ করি না। সর্বোপরি, এটি ভাল যে এটি সনাক্ত করা হয়েছে এবং এটি ওয়েব ডিজাইনে বিশুদ্ধ-CSS বাস্তবায়নের এক ধাপ।

আমি আমার পাঠ্যাংশে যেকোন অস্বাভাবিক সম্মেলনের জন্য ক্ষমাপ্রার্থী, আমি ইংরেজিতে নেটিভ স্পিকার নই এবং তাই উত্তর দেওয়ার জন্য বেশ নতুন।

সম্পাদনা : এটিও উল্লেখ করা উচিত যে আমাদের কিছু ব্রাউজারে মন্দ স্ক্রোলবার রয়েছে। উদাহরণস্বরূপ, ফায়ারফক্স ব্যবহার করার সময় আমি লক্ষ্য করেছি যে 100vw মানে ভিউপোর্টের পুরো প্রস্থের অর্থ, স্ক্রোলবারের অধীনে প্রসারিত হচ্ছে (যেখানে সামগ্রীটি প্রসারিত করা যাবে না!), তাই পূর্ণবয়স্ক পাঠটি সাবধানে মার্জিন করা উচিত এবং বেশিরভাগ ব্রাউজার এবং ডিভাইসগুলির সাথে পরীক্ষামূলকভাবে পরীক্ষা করা উচিত।

আমি ফন্ট স্কেলিং কাছাকাছি আমার মাথা পেয়ে একটি কঠিন সময় হচ্ছে।

আমি বর্তমানে 100% একটি শরীরের font-size সঙ্গে এই সাইট আছে। কি 100% যদিও? এই 16px এ গণনা বলে মনে হয়।

আমি মনে করিয়ে দিয়েছিলাম যে 100% কোনওভাবে ব্রাউজার উইন্ডোর আকারকে বোঝাবে, কিন্তু দৃশ্যত এটি 16 পিএক্স নয় কারণ উইন্ডোটি একটি মোবাইল প্রস্থ বা সম্পূর্ণ ফুটো ওয়াইডস্ক্রীন ডেস্কটপে পুনরায় আকারে নেওয়া হয়েছে কিনা।

আমি কীভাবে আমার সাইটের স্কেলে তার পাত্রে সম্পর্কিত পাঠ্য তৈরি করতে পারি? আমি em ব্যবহার করে চেষ্টা কিন্তু এই স্কেল হয় না।

আমার যুক্তি হচ্ছে যে আমার মেনু মত জিনিসগুলি আকার পরিবর্তন করার সময় .menuItem হয়ে যায়, তাই আমি কন্টেনারের প্রস্থের সাথে সম্পর্কিত অন্যান্য উপাদানের মধ্যে .menuItem এর px font-size হ্রাস করতে হবে। (যেমন একটি বড় ডেস্কটপে মেনুতে, 22 পিএক্সটি পুরোপুরি কাজ করে। ট্যাবলেট প্রস্থে নীচে যান এবং 16px আরো উপযুক্ত।)

আমি সচেতন যে আমি ব্রেকপয়েন্ট যোগ করতে পারি, তবে আমি সত্যিই অতিরিক্ত ব্রেকপয়েন্ট থাকার মতো পাঠ্যকে স্কেল করতে চাই, নাহলে পাঠ্য নিয়ন্ত্রণের জন্য প্রতি 100px হ্রাসের জন্য শত শত ব্রেকপয়েন্ট দিয়ে শেষ করব।


সিএসএস ভেরিয়েবল ব্যবহার করুন

কেউ এখনো সিএসএস ভেরিয়েবল উল্লেখ করেনি, এবং এই পদ্ধতিটি আমার জন্য সেরা কাজ করেছে, তাই:

ধরুন আপনার পৃষ্ঠায় একটি কলাম আছে যা একটি মোবাইল ব্যবহারকারীর স্ক্রীনের প্রস্থের 100%, তবে এটি max-width800px এর মধ্যে রয়েছে, সুতরাং ডেস্কটপে কলামের উভয় পাশে কিছু স্থান রয়েছে। আপনার পৃষ্ঠার শীর্ষে এটি রাখুন:

<script> document.documentElement.style.setProperty('--column-width', Math.min(window.innerWidth, 800)+'px'); </script>

এবং এখন আপনি vwআপনার ফন্টের আকার সেট করতে যে পরিবর্তনশীল (অন্তর্নির্মিত ইউনিটের পরিবর্তে) ব্যবহার করতে পারেন । যেমন

p {
  font-size: calc( var(--column-width) / 100 );
}

এটি একটি বিশুদ্ধ সিএসএস পদ্ধতির নয়, তবে এটি খুব কাছাকাছি।


100% বেস ফন্টের আকারের সাথে সম্পর্কিত, যা আপনি সেট না করলে ব্রাউজারের ব্যবহারকারী-এজেন্ট ডিফল্ট হবে।

আপনি উইন্ডোজ মাত্রা আপেক্ষিক বেস ফন্ট আকার সামঞ্জস্য করতে জাভাস্ক্রিপ্ট একটি টুকরা ব্যবহার করার পরে আপনি প্রভাব পেতে।


SVG সঙ্গে সমাধান:

<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/


আপনার সিএসএসের অভ্যন্তরে আপনার নকশাটি যে কোনও জায়গায় ভাঙ্গার জন্য 320px প্রস্থকে নীচে পরিবর্তন করার চেষ্টা করুন:

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

       body { font-size: 1em; }

    }

তারপর আপনি চান হিসাবে "px" বা "em" এ ফন্ট সাইজ দিন।


আপনি কি http://simplefocus.com/flowtype/ চেষ্টা করেছেন?

এই আমি আমার সাইটের জন্য ব্যবহার কি এবং পুরোপুরি কাজ করেছে। আশা করি এটা সাহায্য করবে.


আমার কোডটি দেখে নিন এটি font size smaller করে যা কিছু fit আছে

কিন্তু আমি মনে করি এটি ভাল ব্যবহারকারীর অভিজ্ঞতার দিকে পরিচালিত করে না

var containerWidth = $("#ui-id-2").width();
var items = $(".quickSearchAutocomplete .ui-menu-item");
var fontSize = 16;

items.each(function(){
    //display value depend sometimes on your case you may make it block or inline-table instead of inline-block or whatever value that make the div take overflow width
    $(this).css({"whiteSpace":"nowrap","display":"inline-block"});
    while ($(this).width() > containerWidth){
         console.log("$(this).width()"+ $(this).width() + "containerWidth" + containerWidth)
         $(this).css("font-size", fontSize -= 0.5);
    }
});

এই আপনি সাহায্য আশা করি


আমার নিজস্ব সমাধান, jQuery ভিত্তিক, ধীরে ধীরে ফন্টের আকার বাড়িয়ে কাজ করে যতক্ষণ না কন্টেইনারটি উচ্চতা বৃদ্ধি পায় (অর্থাত এটি একটি লাইন বিরতি পায়)। এটা বেশ সহজ কিন্তু বেশ ভাল কাজ করে এবং এটি ব্যবহার করা খুব সহজ। আপনি ব্যবহৃত ফন্ট সম্পর্কে কিছু জানতে হবে না, সবকিছু ব্রাউজার দ্বারা যত্ন নেওয়া হয়।

আপনি http://jsfiddle.net/tubededentifrice/u5y15d0L/2/ এটি দিয়ে খেলতে পারেন

যাদু এখানে ঘটেছে:

var setMaxTextSize=function(jElement) {
    //Get and set the font size into data for reuse upon resize
    var fontSize=parseInt(jElement.data(quickFitFontSizeData)) || parseInt(jElement.css("font-size"));
    jElement.data(quickFitFontSizeData,fontSize);

    //Gradually increase font size until the element gets a big increase in height (ie line break)
    var i=0;
    var previousHeight;
    do
    {
        previousHeight=jElement.height();
        jElement.css("font-size",""+(++fontSize)+"px");
    }
    while(i++<300 && jElement.height()-previousHeight<fontSize/2)

    //Finally, go back before the increase in height and set the element as resized by adding quickFitSetClass
    fontSize-=1;
    jElement.addClass(quickFitSetClass).css("font-size",""+fontSize+"px");

    return fontSize;
};

আমার সমস্যা অনুরূপ কিন্তু একটি শিরোনাম মধ্যে স্কেলিং টেক্সট সম্পর্কিত। আমি ফিট ফন্ট চেষ্টা করেছি কিন্তু কোনও ফলাফল পেতে কম্প্রেসারটিকে টগল করতে হবে, যেহেতু এটি কিছুটা সমস্যা সমাধান করছে, যেমন টেক্সট ফ্লো ছিল। তাই আমি আমার নিজের ছোট্ট প্লাগইন লিখেছিলাম যা আপনার ধারণার জন্য ফন্টের আকারকে হ্রাস করে, আপনার ধরে নেওয়া হয়েছে যে আপনি 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);

আমি ফন্ট সাইজ পরিবর্তে CSS পরিবর্তনের মাধ্যমে সাধারণ স্কেল ফাংশন তৈরি করেছি। আপনি কোন কন্টেইনারের ভিতরে এটি ব্যবহার করতে পারেন, আপনাকে মিডিয়া ক্যোয়ারী ইত্যাদি সেট করতে হবে না :)

ব্লগ পোস্ট: 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


একটি জাভাস্ক্রিপ্ট fallback (অথবা আপনার একমাত্র সমাধান) হিসাবে, আপনি আমার jQuery স্ক্যালেম প্লাগইনটি ব্যবহার করতে পারেন, যা আপনাকে reference বিকল্পটি পাশ করে মূল উপাদান (কন্টেইনার) সম্পর্কিত আপেক্ষিকভাবে স্কেল করতে দেয়।


এটি খুব কার্যকরী নাও হতে পারে, তবে যদি আপনি ফন্টটি পিতামাতার সরাসরি ফাংশন চান তবে ডিভি / পৃষ্ঠাটির আকারটি পড়তে যে কোন JS কে / loops (interval) ছাড়াও, এটি করার একটি উপায় রয়েছে। আইফ্রেমগুলি। আইফ্রেমের মধ্যে যে কোনও আইফ্রেমের আকার ভিউপোর্টের আকার হিসাবে বিবেচিত হবে। তাই ট্রিকটি কেবল একটি আইফ্রেম তৈরি করতে হবে যার প্রস্থটি আপনার পাঠ্যটির সর্বোচ্চ প্রস্থ এবং আপনার উচ্চতা সর্বোচ্চ উচ্চতার সমান * নির্দিষ্ট পাঠ্যের দিক অনুপাত।

ভিউপোর্ট ইউনিটগুলি পাঠ্যের জন্য পাশাপাশি পিতামাতার ইউনিটগুলির সাথেও সীমাবদ্ধ করা যাবে না (যেমন,% আকারটি অন্য সকলের মতো আচরণ করে), ভিউপোর্ট ইউনিটগুলি খুব শক্তিশালী সরঞ্জাম সরবরাহ করে: মিনি / সর্বোচ্চ মাত্রা পেতে সক্ষম হচ্ছে । আপনি অন্য যে কোন জায়গায় তা করতে পারবেন না - আপনি বলতে পারেন না .. এই ডিভটের উচ্চতাটি পিতামাতার * প্রস্থের প্রস্থ হতে পারে।

বলা হচ্ছে, কৌশলটি ভিনমেন ব্যবহার করা, এবং আইফ্রেমের আকার সেট করা যাতে যাতে [উচ্চতা] * উচ্চতা উচ্চমানের একটি ফন্ট সাইজ হয় এবং উচ্চতা যখন সীমিত মাত্রা হয়, এবং [ভগ্নাংশ] * প্রস্থ হলে মোট প্রস্থ সীমিত মাত্রা। এই হী হ'ল প্রস্থ এবং অনুপাত অনুপাতের একটি পণ্য হতে হবে।

আমার বিশেষ উদাহরণ জন্য, আপনি আছে

.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);
}

এই পদ্ধতির সাথে ছোট বিরক্তি হল যে আপনি নিজে আইফ্রেমের সিএসএস সেট করতে হবে। যদি আপনি পুরো সিএসএস ফাইলটি সংযুক্ত করেন তবে এটি অনেক পাঠ্য এলাকার জন্য অনেক ব্যান্ডউইথ গ্রহণ করবে। সুতরাং, আমি যা করি তা এমন নিয়মকে সংযুক্ত করে যা আমি সরাসরি আমার CSS থেকে চাই।

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

আপনি ছোট ফাংশনটি লিখতে পারেন যা CSS সিলেক্ট / সমস্ত সিএসএস নিয়ম পায় যা পাঠ্য এলাকাকে প্রভাবিত করবে।

আমি কিছু সাইক্লিং / শোনা জেএস ছাড়া এটি করতে অন্য উপায় মনে করতে পারে না। মূল সমাধানটি ব্রাউজারগুলির জন্য প্যারেন্ট কন্টেইনারের একটি ফাংশন হিসাবে পাঠ্য এবং একই ভিমিন / ভিএমএক্স টাইপ কার্যকারিতা প্রদানের জন্য একটি উপায় প্রদান করবে।

JS Fiddle: https://jsfiddle.net/0jr7rrgm/3/ (মাউসের লাল স্কোয়ারটি লক করতে একবার ক্লিক করুন, মুক্ত করতে আবার ক্লিক করুন)

বেশির ভাগ জেএসই কেবল আমার কাস্টম ক্লিক-ড্র্যাগ ফাংশন


এই ওয়েব উপাদানটি ফন্ট সাইজ পরিবর্তন করে যাতে অভ্যন্তরীণ পাঠ্য প্রস্থ কনটেটার প্রস্থের সাথে মেলে। demo চেক করুন।

আপনি এটি ভালো ব্যবহার করতে পারেন:

<full-width-text>Lorem Ipsum</full-width-text>

vw , em & সহ ব্যবহার করে। নিশ্চিতভাবে কাজ করে, কিন্তু ইমো সবসময় সূক্ষ্ম-সুরকরণের জন্য মানুষের মানুষের স্পর্শ প্রয়োজন।

এখানে একটি স্ক্রিপ্ট যা আমি লিখেছি @ টিএনটি-রক্সের 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 হ্রাস করে এবং তারপরে সর্বোচ্চ প্রস্থে 1em পর্যন্ত 0.1 দ্বারা ক্রমবর্ধমান শুরু হয়।

jsFiddle


জাভাস্ক্রিপ্ট ছাড়া এটি করার একটি উপায় আছে!

আপনি একটি ইনলাইন svg ব্যবহার করতে পারেন। এটি ইনলাইন থাকলে আপনি একটি svg তে css ব্যবহার করতে পারেন। আপনি এই পদ্ধতি ব্যবহার করে মনে রাখবেন আপনার 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/

আরো ঝলসানি কিছু চান?

SVGs আপনাকে আকার এবং জাঙ্ক দিয়ে দুর্দান্ত জিনিসগুলিও করার অনুমতি দেয়। স্কেলেবল পাঠ্য জন্য এই মহান ব্যবহার ক্ষেত্রে দেখুন ...

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


সম্পাদনা করুন: যদি কন্টেইনারটি শরীরের সিএসএস ট্রিকস নয় তবে এখানে আপনার সমস্ত বিকল্প জুড়ে রয়েছে: https://css-tricks.com/fitting-text-to-a-container/

যদি ধারক শরীর হয়, আপনি যা খুঁজছেন তা হল ভিউপোর্ট-শতাংশ দৈর্ঘ্য :

ভিউপোর্ট-শতাংশ দৈর্ঘ্য প্রাথমিক ধারণকারী ব্লকের আকারের সাথে সম্পর্কিত। যখন প্রাথমিক ব্লকের উচ্চতা বা প্রস্থ পরিবর্তিত হয়, তখন সেগুলি অনুযায়ী মাপা হয়। যাইহোক, যখন মূল উপাদানটি ওভারফ্লোের মান স্বয়ংক্রিয় হয়, কোনও স্ক্রোল বার উপস্থিত থাকে বলে মনে হয় না।

মান হল:

  • vw (ভিউপোর্ট প্রস্থের%)
  • vh (ভিউপোর্টের উচ্চতার%)
  • vi (মূল উপাদান এর ইনলাইন অক্ষের দিকের ভিউপোর্ট আকারের 1%)
  • vb (মূল উপাদান এর ব্লক অক্ষের দিকের ভিউপোর্ট আকারের 1%)
  • vmin ( vw বা vh এর ছোট)
  • vmax (বড় বা vw বা vh )

1 ভি * প্রাথমিক ধারণকারী ব্লকের 1% সমান।

এটি ব্যবহার করে দেখে মনে হচ্ছে:

p {
    font-size: 4vw;
}

আপনি দেখতে পারেন, যখন ভিউপোর্ট প্রস্থ বৃদ্ধি পায়, তাই ফন্ট সাইজ, মিডিয়া প্রশ্নগুলি ব্যবহার করার প্রয়োজন ছাড়াই।

এই মানগুলি একটি আকারের ইউনিট, ঠিক যেমন px বা em , তাই তারা পাশাপাশি অন্যান্য উপাদানের আকারেও ব্যবহার করা যেতে পারে, যেমন প্রস্থ, মার্জিন বা প্যাডিং।

ব্রাউজার সমর্থনটি বেশ ভাল, তবে আপনাকে সম্ভবত একটি ফাল্যাকব প্রয়োজন হবে, যেমন:

p {
    font-size: 16px; 
    font-size: 4vw;
}

সমর্থন পরিসংখ্যান পরীক্ষা করে দেখুন: http://caniuse.com/#feat=viewport-units

এছাড়াও, একটি বিস্তৃত বর্ণের জন্য সিএসএস-ট্রিকগুলি দেখুন: css-tricks.com/viewport-sized-typography

এখানে min / max মাপের সেটিংস এবং মাপের উপর একটু বেশি নিয়ন্ত্রণ করার বিষয়ে একটি চমৎকার নিবন্ধ রয়েছে: http://madebymike.com.au/writing/precise-control-responsive-typography/

এবং এখানে calc () ব্যবহার করে আপনার আকার সেট করার বিষয়ে একটি নিবন্ধ রয়েছে যাতে পাঠ্য ভিউপোর্ট পূরণ করে: http://codepen.io/CrocoDillon/pen/fBJxu

এছাড়াও, অনুগ্রহ করে এই নিবন্ধটি দেখুন, যা লাইন-উচ্চতাটি সমন্বয় করার জন্য 'গলিত শীর্ষস্থানীয়' ডাব্লেড একটি কৌশল ব্যবহার করে। https://css-tricks.com/molten-leading-css/


এটা আমার জন্য কাজ করেছে:

আমি ফন্ট আকারের সেটিং থেকে একটি প্রস্থ / হেঘ্টের উপর ভিত্তি করে আনুমানিক ফন্ট সাইজ চেষ্টা করি: 10px। মূলত ধারণাটি হল "যদি আমার 20px প্রস্থ এবং 11px উচ্চতা ফন্ট সাইজ: 10px এর সাথে থাকে, তাহলে 50px প্রস্থ এবং 30px উচ্চতা একটি ধারক গণিত করার জন্য এটি সর্বাধিক ফন্ট-আকার হবে?"

উত্তর একটি ডবল অনুপাত সিস্টেম:

{20: 10 = 50: এক্স, 11: 10 = 30: Y} = {এক্স = (10 * 50) / 20, Y = (10 * 30) / 11}

এখন এক্স একটি ফন্ট সাইজ যা প্রস্থের সাথে মিলবে, Y একটি ফন্ট সাইজ যা উচ্চতা মিলবে; ছোট মূল্য নিতে

function getMaxFontSizeApprox(el){
    var fontSize = 10;
    var p = el.parentNode;

    var parent_h = p.offsetHeight ? p.offsetHeight : p.style.pixelHeight;
    if(!parent_h)parent_h = 0;

    var parent_w = p.offsetHeight ? p.offsetWidth : p.style.pixelWidth;
    if(!parent_w)parent_w = 0;

    el.style.fontSize = fontSize + "px";

    var el_h = el.offsetHeight ? el.offsetHeight : el.style.pixelHeight;
    if(!el_h)el_h = 0;

    var el_w = el.offsetHeight ? el.offsetWidth : el.style.pixelWidth;
    if(!el_w)el_w = 0;

    //0.5 is the error on the measure that js does
    //if real measure had been 12.49 px => js would have said 12px
    //so we think about the worst case when could have, we add 0.5 to 
    //compensate the round error
    var fs1 = (fontSize*(parent_w + 0.5))/(el_w + 0.5);
    var fs2 = (fontSize*(parent_h) + 0.5)/(el_h + 0.5);

    fontSize = Math.floor(Math.min(fs1,fs2));
    el.style.fontSize = fontSize + "px";
    return fontSize;
}

NB: ফাংশনের যুক্তিটি একটি স্প্যান উপাদান বা উপাদান যা তার পিতামাতার চেয়ে ছোট হওয়া আবশ্যক, অন্যথায় যদি শিশু এবং পিতামাতার উভয় একই প্রস্থ / উচ্চতা ফাংশন ব্যর্থ হয়


যদি এটি কারো পক্ষে সহায়ক হয়, তবে এই থ্রেডে বেশিরভাগ সমাধানগুলি পাঠ্যগুলিকে একাধিক লাইনগুলিতে মোড়ানো হয়, ফর্ম e।

কিন্তু তারপর আমি এটা খুঁজে পেয়েছি, এবং এটি কাজ করেছে:

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

উদাহরণ ব্যবহার:

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


FitText প্লাগিন ব্যবহার করার চেষ্টা করুন , 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' });

গতিশীল পাঠ্যের জন্য, এই প্লাগইনটি বেশ উপযোগী। http://freqdec.github.io/slabText/ । শুধু CSS যোগ করুন

.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();






font-size