ব্যবহারকারীর স্ক্রিন রেজোলিউশনের সাথে সম্পর্কিত হরফ আকার?

Question

আমার একটি তরল ওয়েবসাইট রয়েছে এবং মেনুটির প্রস্থের 20%। আমি চাই মেনুটির ফন্টের আকারটি সঠিকভাবে পরিমাপ করা হোক যাতে এটি সর্বদা বাক্সের প্রস্থের সাথে খাপ খায় এবং পরের লাইনে কখনও মোড়ানো না। আমি "ইউনিট" হিসাবে ইউনিট হিসাবে ব্যবহার করার কথা ভাবছিলাম তবে এটি ব্রাউজারের ফন্টের আকারের সাথে তুলনামূলক, তাই আমি যখন রেজোলিউশনগুলি পরিবর্তন করি তখন ফন্টের আকারটি একই থাকে।

Pts এবং শতাংশ শতাংশ চেষ্টা করা। আমার যেমন প্রয়োজন তেমন কিছুই কাজ করে না ...

দয়া করে কীভাবে এগিয়ে যেতে হবে তার একটি ইঙ্গিত আমাকে দিন।

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

আপনি এটি স্ক্রিনের স্ক্রিন আকার অনুসারে ম্যানুয়ালি দিতে পারেন ust কেবল বিভিন্ন পর্দার আকার দেখতে হবে এবং ম্যানুয়ালি ফন্টের আকার যুক্ত করতে হবে।

Comments

গুরুত্বপূর্ণ দ্রষ্টব্য: আপনার এটি আপনার এইচটিএমএল শিরোনামে যুক্ত করা দরকার। <meta name="viewport" content="width=device-width" /> এছাড়াও আপনি আরও 'প্রতিক্রিয়াশীল' অনুভূতির max-widthপরিবর্তে ব্যবহার করতে পারেন max-device-width।

— শেহেরিয়ার

@ user65165 আপনি যা বলার চেষ্টা করছেন তা আমি পাইনি?

— অর্পিত শ্রীবাস্তব

সর্বোচ্চ-ডিভাইস-প্রস্থ এটি কাজ করছে না। আমি ব্রাউজারের স্ক্রিনটি সামঞ্জস্য করলে কেবলমাত্র সর্বোচ্চ-প্রস্থ কাজ করে।

— রামিসা আনজুম অদিতি

Answer 2

আপনি ব্যবহার করতে পারেন em, %, px। তবে মিডিয়ার প্রশ্নগুলি সম্পর্কে জানতে media-queries এই লিঙ্কটি দেখুন with এছাড়াও, সিএসএস 3 জিনিষ বর্তমান ভিউপোর্ট আকার আপেক্ষিক নির্ধারন জন্য কিছু নতুন মান আছে: vw, vh, এবং vmin। যে লিঙ্ক দেখুন ।

Comments

vw, vh, vminএই উত্তর বিপর্যস্ত।

— ফ্র্যাঙ্ক ল্যামার

ভিউপোর্ট ইউনিটগুলি প্রতিটি * ব্রাউজারের দ্বারা সমর্থিত: এই এখন সঠিক উত্তর, ক্যানিউজ . com / #feat=viewport-units ।

— cazzer

ভুলে vmax

— যাবেন

Answer 3

নতুন উপায়

এটি অর্জনের বিভিন্ন উপায় রয়েছে।

সিএসএস 3 নতুন মাত্রা সমর্থন করে যা পোর্ট দেখার সাথে সম্পর্কিত relative তবে এটি অ্যান্ড্রয়েডে কাজ করে না।

1. 3.2vw = ভিউপোর্টের প্রস্থের 3.2%
2. ৩.২vh = ভিউপোর্টের উচ্চতার ৩.২%
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 নয় বা বেস ফন্টের আকারটিকে ডিভাইসের ডিফল্টে রেখে সমস্ত কিছু এমমে রেখে দিতে পারবেন।

   • "রুট ইমস" (রিম) : "রিম" একটি স্কেলযোগ্য ইউনিট। 1 ইমেজ শরীর / এইচটিএমএল এর ফন্ট আকারের সমান, উদাহরণস্বরূপ, যদি নথির ফন্ট-আকার 12pt হয়, 1 মিম 12pt এর সমান। রুট ইমস প্রকৃতির আকারে স্কেলেবল, সুতরাং 2 মেম্বার 24pt, .5 মিমি 6pt ইত্যাদির সমান হয় etc

   • শতাংশ (%) : শতাংশ ইউনিট অনেকটা "এম" ইউনিটের মতো, কয়েকটি মৌলিক পার্থক্যের জন্য সংরক্ষণ করে। প্রথম এবং সর্বাগ্রে, বর্তমান ফন্টের আকারটি 100% (অর্থাৎ 12pt = 100%) এর সমান। শতাংশ ইউনিট ব্যবহার করার সময়, আপনার পাঠ্য মোবাইল ডিভাইসগুলির জন্য এবং অ্যাক্সেসযোগ্যতার জন্য পুরোপুরি স্কেলযোগ্য remains

দেখতে kyleschaeffer.com / ....

Comments

হরফ আকার: 3.2vw আমার ক্ষেত্রে কাজ করেছে। যদিও ব্রাউজার সমর্থন সম্পর্কে নিশ্চিত না।

— manpikin

"একটি ইমাম বর্তমান ফন্টের আকারের সমান, উদাহরণস্বরূপ, যদি নথির ফন্ট-আকার 12pt হয়, 1 মিম 12pt এর সমান" "আসলে, ধারকটির emফন্ট-আকারের সাথে সম্পর্কিত। এটি অপ্রত্যাশিত আচরণের দিকে পরিচালিত করতে পারে যখন ধারকটিতে এটির ফন্ট আকার সেট করা থাকে em... নথির ফন্টের সাথে আকার আকারের জন্য ব্যবহার করুন rem।

— স্টিজন ডি উইট

Answer 4

আমি একটি দুর্দান্ত জেএস সমাধান তৈরি করেছি - যা সম্পূর্ণ-প্রতিক্রিয়াশীল এইচটিএমএল (যেমন শতাংশের সাথে নির্মিত এইচটিএমএল) জন্য উপযুক্ত

1. আমি ফন্ট-আকারগুলি সংজ্ঞায়িত করতে কেবল "এম" ব্যবহার করি।

2. এইচটিএমএল ফন্টের আকারটি 10 ​​পিক্সেলে সেট করা হয়েছে:

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

3. আমি দস্তাবেজ প্রস্তুত একটি ফন্ট পুনরায় আকার ফাংশন কল:

// এর জন্য জিকিউরি প্রয়োজন

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

আকর্ষণীয় সমাধান, খারাপ নয়। আমি পরীক্ষা করেছি যে আমি কীভাবে ব্যবহার করব তা শিখেছি, তবে এটি আমি ম্যাক্সডাব্লু সাইজের উইন্ডোজগুলিতে 10px আকারের পাঠ্যে স্থির করেছি, ঠিক আছে? কিন্তু এই? "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-size/

Answer 8

আমি https://stackoverflow.com/a/17845473/189411 এর একটি রূপ তৈরি করেছি

আপনি "চেক" আকারের ন্যূনতম এবং সর্বাধিক বাক্সের আকারের ক্ষেত্রে ন্যূনতম এবং সর্বাধিক পাঠ্যের আকার সেট করতে পারেন। এছাড়াও আপনি যেখানে টেক্সট আকার প্রয়োগ করতে চান তার চেয়ে আলাদা ডোম উপাদানটির আকার পরীক্ষা করতে পারেন।

আপনি # আকার -2 উপাদানের উপর 19px এবং 25px এর মধ্যে পাঠ্যকে আকার দিন, 500px এবং # আকার -2 উপাদানটির 960px প্রস্থের উপর ভিত্তি করে

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

আপনি শরীরের উপাদানগুলির 500px এবং 960px প্রস্থের উপর ভিত্তি করে # আকার -1 উপাদানটিতে 13px এবং 20px এর মধ্যে পাঠ্যকে পুনরায় আকার দিন

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>

আমি আশা করি এটি সাহায্য করবে আমি আমার ফেজ গেমের জন্য এই সূত্রটি ব্যবহার করছি।