उपयोगकर्ता के स्क्रीन रिज़ॉल्यूशन के सापेक्ष फ़ॉन्ट का आकार?

Question

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

कोशिश भी की और प्रतिशत भी। कुछ भी काम नहीं करता है क्योंकि मुझे इसकी आवश्यकता है ...

कृपया मुझे आगे बढ़ने का संकेत दें।

Answer 1

@media screen and (max-width : 320px)
{
  body or yourdiv element
  {
    font:<size>px/em/rm;
  }
}
@media screen and (max-width : 1204px)
{
  body or yourdiv element
  {
    font:<size>px/em/rm;
  }
}

आप इसे स्क्रीन के स्क्रीन साइज के हिसाब से मैनुअली दे सकते हैं। बस अलग-अलग स्क्रीन साइज का लुक देना है और मैनुअली फॉन्ट साइज जोड़ना है।

Comments

महत्वपूर्ण नोट: आपको इसे अपने HTML हेड में जोड़ना होगा। <meta name="viewport" content="width=device-width" /> इसके अलावा आप एक अधिक 'उत्तरदायी' अनुभव max-widthके max-device-widthलिए उपयोग कर सकते हैं ।

— शहरयार

@ user65165 मुझे वह नहीं मिला जो आप कहने की कोशिश कर रहे हैं?

— अर्पित श्रीवास्तव

अधिकतम डिवाइस-चौड़ाई यह काम नहीं कर रही है। ब्राउज़र स्क्रीन को समायोजित करने पर केवल अधिकतम-चौड़ाई काम करती है।

— रमिसा अंजुम अदिति

Answer 2

आप उपयोग कर सकते हैं em, %, px। लेकिन मीडिया-प्रश्नों के बारे में जानने के लिए media-queries इस लिंक को देखें । इसके अलावा, CSS3 बातें वर्तमान व्यूपोर्ट आकार के सापेक्ष आकार के लिए कुछ नए मान हैं: vw, vh, और vmin। उसके बारे में लिंक देखें ।

Comments

vw, vh, vminइस उत्तर रॉक।

— फ्रैंक ल्मर

अब यह सही उत्तर है, यह देखते हुए कि व्यूपोर्ट इकाइयां हर * ब्राउज़र: caniuse.com/#feat=viewport-units द्वारा समर्थित हैं ।

— cazzer

मत भूलोvmax

— live2

Answer 3

नया रास्ता

इसे प्राप्त करने के कई तरीके हैं।

CSS3 नए आयामों का समर्थन करता है जो पोर्ट को देखने के सापेक्ष हैं। लेकिन यह Android में काम नहीं करता है।

1. व्यूपोर्ट की चौड़ाई का 3.2vw = 3.2%
2. 3.2vh = व्यूपोर्ट की ऊंचाई का 3.2%
3. 3.2vmin = 3.2vw या 3.2vh का छोटा

4. 3.2vmax = 3.2vw या 3.2vh का बड़ा हिस्सा

   body
   {
       font-size: 3.2vw;
   }
   

देख css-tricks.com / .... और यह भी देखो caniuse.com / ....

पुराना तरीका

1. मीडिया क्वेरी का उपयोग करें लेकिन कई विराम बिंदुओं के लिए फ़ॉन्ट आकार की आवश्यकता होती है

   body
   {
       font-size: 22px; 
   }
   h1
   {
      font-size:44px;
   }
   
   @media (min-width: 768px) 
   {
      body
      {
          font-size: 17px; 
      }
      h1
      {
          font-size:24px;
      }
   }
   

2. % या रेम में आयामों का उपयोग करें । बस आधार फ़ॉन्ट आकार बदलें सब कुछ बदल जाएगा। पिछले एक के विपरीत आप केवल बॉडी फॉन्ट बदल सकते हैं और एच 1 एवरी टाइम नहीं कर सकते या बेस फॉन्ट साइज को डिवाइस के डिफॉल्ट में बदल सकते हैं और सभी को ईएम में आराम दे सकते हैं।

   • "रूट ईमेज़" (रेम) : "रेम" एक स्केलेबल इकाई है। 1rem, उदाहरण के लिए, शरीर / html के फ़ॉन्ट-आकार के बराबर है, यदि दस्तावेज़ का फ़ॉन्ट-आकार 12pt है, तो 1em 12pt के बराबर है। रूट एम्स प्रकृति में स्केलेबल हैं, इसलिए 2em बराबर 24pt, .5em बराबर 6pt, आदि होगा।

   • प्रतिशत (%) : प्रतिशत इकाई बहुत कुछ "एम" इकाई की तरह है, कुछ मूलभूत अंतरों के लिए बचाएं। सबसे पहले और सबसे महत्वपूर्ण, वर्तमान फ़ॉन्ट-आकार 100% (यानी 12pt = 100%) के बराबर है। प्रतिशत इकाई का उपयोग करते समय, आपका पाठ मोबाइल उपकरणों और पहुँच के लिए पूरी तरह से स्केलेबल रहता है।

देखिए kyleslifeffer.com /…।

Comments

फ़ॉन्ट-आकार: 3.2vw ने मेरे मामले में काम किया। हालांकि ब्राउज़र समर्थन के बारे में निश्चित नहीं है।

— मैनपिकिन

"एक एम, वर्तमान फ़ॉन्ट-आकार के बराबर है, उदाहरण के लिए, यदि दस्तावेज़ का फ़ॉन्ट-आकार 12pt है, तो 1em 12pt के बराबर है।" दरअसल, emकंटेनर के फ़ॉन्ट-आकार के सापेक्ष है। यह अप्रत्याशित व्यवहार को जन्म दे सकता है जब कंटेनर में भी यह फ़ॉन्ट आकार सेट होता है em... दस्तावेज़ फ़ॉन्ट के सापेक्ष आकार प्राप्त करने के लिए, उपयोग करें rem।

— स्टिजन डे विट

Answer 4

मैंने एक अच्छा JS समाधान विकसित किया है - जो पूरी तरह से उत्तरदायी HTML के लिए उपयुक्त है (यानी HTML प्रतिशत के साथ बनाया गया है)

1. मैं फ़ॉन्ट-आकारों को परिभाषित करने के लिए केवल "एम" का उपयोग करता हूं।

2. html फ़ॉन्ट का आकार 10 पिक्सेल पर सेट है:

   html {
     font-size: 100%;
     font-size: 62.5%;
   }
   

3. मैं दस्तावेज़-तैयार पर एक फ़ॉन्ट-आकार बदलने वाले फ़ंक्शन को कॉल करता हूं:

// इसके लिए JQuery की आवश्यकता है

function doResize() {
    // FONT SIZE
    var ww = $('body').width();
    var maxW = [your design max-width here];
    ww = Math.min(ww, maxW);
    var fw = ww*(10/maxW);
    var fpc = fw*100/16;
    var fpc = Math.round(fpc*100)/100;
    $('html').css('font-size',fpc+'%');
}

Comments

दिलचस्प समाधान, बुरा नहीं है। मैंने परीक्षण किया है कि मैंने कैसे उपयोग करके सीखा है, लेकिन मैंने इसे 10W आकार के पाठ पर अधिकतम डब्ल्यूडब्ल्यू आकार की खिड़कियों पर तय किया है, यह ठीक है? लेकिन यह? "16" क्या है? var fpc = fw * 100/16;

— डोमेनिको मोनाको

Answer 5

आप इस टूल को आज़मा सकते हैं: http://fittextjs.com/

मैंने इस दूसरे टूल का उपयोग नहीं किया है, लेकिन ऐसा लगता है: https://github.com/zachleat/BigText

Answer 6

निश्चित नहीं है कि यह जटिल क्यों है। मैं इस मूल जावास्क्रिप्ट करना होगा

<body onresize='document.getElementsByTagName("body")[0].style[ "font-size" ] = document.body.clientWidth*(12/1280) + "px";'>

जहां 12 का मतलब 1280 रेजोल्यूशन पर 12px है। आप यहां मनचाहा मूल्य तय करते हैं

Answer 7

यह मेरे लिए काम किया:

body {

  font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum 
viewport width]) / ([maximum viewport width] - [minimum viewport width])));

}

यहाँ विस्तार से बताया गया: https://css-tricks.com/books/volume-i/scale-typography-screen-ize/

Answer 8

मैंने https://stackoverflow.com/a/17845473/189411 का एक संस्करण बनाया है

जहाँ आप मिनट और अधिकतम आकार के संबंध में न्यूनतम और अधिकतम पाठ आकार सेट कर सकते हैं, जो आपको "चेक" आकार चाहिए। इसके अलावा आप बॉक्स से अलग डोम तत्व के आकार की जाँच कर सकते हैं जहाँ आप पाठ आकार लागू करना चाहते हैं।

आप # आकार -2 तत्व पर आधारित 19px और 25px के बीच # आकार -2 तत्व पर पाठ का आकार बदलते हैं, और # आकार -2 तत्व की 960px चौड़ाई

resizeTextInRange(500,960,19,25,'#size-2');

आप # आकार -1 तत्व पर 13px और 20px के बीच, शरीर के तत्व की 500px और 960px चौड़ाई के आधार पर पाठ का आकार बदलते हैं

resizeTextInRange(500,960,13,20,'#size-1','body');

पूरा कोड है https://github.com/kiuz/sandbox-html-js-css/tree/gh-pages/text-resize-in-range-of-text-and-screen/src

function inRange (x,min,max) {
    return Math.min(Math.max(x, min), max);
}

function resizeTextInRange(minW,maxW,textMinS,textMaxS, elementApply, elementCheck=0) {

    if(elementCheck==0){elementCheck=elementApply;}

    var ww = $(elementCheck).width();
    var difW = maxW-minW;
    var difT = textMaxS- textMinS;
    var rapW = (ww-minW);
    var out=(difT/100)*(rapW/(difW/100))+textMinS;
    var normalizedOut = inRange(out, textMinS, textMaxS);
    $(elementApply).css('font-size',normalizedOut+'px');

    console.log(normalizedOut);

}

$(function () {
    resizeTextInRange(500,960,19,25,'#size-2');
    resizeTextInRange(500,960,13,20,'#size-1','body');
    $(window).resize(function () {
        resizeTextInRange(500,960,19,25,'#size-2');
        resizeTextInRange(500,960,13,20,'#size-1','body');
    });
});

Answer 9

मीडिया के प्रश्नों का उपयोग नहीं करना अच्छा है क्योंकि यह फ़ॉन्ट आकार को धीरे-धीरे स्केल करने की अनुमति देता है।

vwइकाइयों का उपयोग करके व्यू पोर्ट आकार के सापेक्ष फ़ॉन्ट आकार समायोजित किया जाएगा।

vwफ़ॉन्ट आकार में सीधे इकाइयों को परिवर्तित करने से मोबाइल रिज़ॉल्यूशन और डेस्कटॉप दोनों के लिए मीठे स्थान पर हिट करना मुश्किल हो जाएगा।

मैं कुछ इस तरह की कोशिश करने की सलाह देता हूं:

body {
    font-size: calc(0.5em + 1vw);
}

क्रेडिट: गहराई में सीएसएस

Answer 10

<script>
function getFontsByScreenWidth(actuallFontSize, maxScreenWidth){
     return (actualFontSize / maxScreenWidth) * window.innerWidth;
}

// Example:
fontSize = 18;
maxScreenWidth = 1080;
fontSize = getFontsByScreenWidth(fontSize, maxScreenWidth)

</script>

मुझे उम्मीद है कि इससे सहायता मिलेगी। मैं अपने फेज गेम के लिए इस फॉर्मूले का इस्तेमाल कर रहा हूं।