সিএসএসে প্রতিক্রিয়াশীল ফন্টের আকার

342

আমি জুরব ফাউন্ডেশন 3 গ্রিড ব্যবহার করে একটি সাইট তৈরি করেছি । প্রতিটি পৃষ্ঠায় একটি বৃহত্তর h1:

body {
  font-size: 100%
}

/* Headers */

h1 {
  font-size: 6.2em;
  font-weight: 500;
}
<div class="row">
  <div class="twelve columns text-center">
    <h1> LARGE HEADER TAGLINE </h1>
  </div>
  <!-- End Tagline -->
</div>
<!-- End Row -->
স্নিপেট প্রসারিত করুন

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

আমি লক্ষ করেছি যে জুরব ফাউন্ডেশন 3 টাইপোগ্রাফি উদাহরণ পৃষ্ঠায় , শিরোনামগুলি ব্রাউজারটি সংকুচিত এবং প্রসারিত হওয়ায় এটি খাপ খায় ।

আমি কি সত্যিই সুস্পষ্ট কিছু মিস করছি? আমি কীভাবে এটি অর্জন করব?

css  responsive-design  font-size  zurb-foundation  em 
— user2213682
সূত্র
1
এখানে একবার দেখুন: কেবলমাত্র CSS সহ প্রতিক্রিয়াশীল ফন্ট-আকার https://github.com/pavelkukov/Font-Size-Responsive-CSS ডেমো: http://fiddle.jshell.net/dgJaK/1/show/
— প্যাভেল
2
আমার মনে হয় প্রথম লিঙ্কটি পুরানো হয়েছে
ওএমজি, এত জটিল উত্তর। শুধু CSS রিম ব্যবহার করুন ।
— টুলমেকারস্টেভ
সিএসএস রিম ভিউপোর্ট উইন্ডোর উপর ভিত্তি করে গতিশীল আকার পরিবর্তন করতে পারে না। যদি আপনার এটি করার দরকার হয় তবে আপনার জাভাস্ক্রিপ্ট বা নীচের নীচে খাঁটি CSS3 উত্তরগুলির একটি দরকার। বড় শিরোনামের পাঠ্যের ক্ষেত্রে এটি কেবলমাত্র আপনার প্রয়োজন।
— ইভান ডোনভান
@ টুলমেকারস্টেটিভ এটি বলা খুব নিখুঁত বিষয়, বিশেষত সমস্ত ডিভাইস জুড়ে প্রতিক্রিয়াশীল হওয়ার বিষয়গুলি নিয়ে। রিম আদৌ কোনও দুর্দান্ত বিকল্প নয়, আপনি কেবল উত্তরগুলি উপেক্ষা করবেন বলে মনে হচ্ছে এটি "জটিল"?
— ইমোব

উত্তর:

287

font-sizeভালো সাড়া না যখন ব্রাউজার উইন্ডোর মাপ পরিবর্তন। পরিবর্তে তারা ব্রাউজার জুম / টাইপ আকারের সেটিংসে প্রতিক্রিয়া জানায়, যেমন আপনি ব্রাউজারে থাকাকালীন কীবোর্ডে Ctrlএবং +একসাথে চাপলে ।

মিডিয়া প্রশ্নের

ফন্ট-আকার হ্রাস করতে আপনাকে মিডিয়া ক্যোয়ারী ব্যবহারের দিকে লক্ষ্য রাখতে হবে নির্দিষ্ট বিরতিতে যেখানে এটি আপনার নকশা ভাঙতে এবং স্ক্রোলবার তৈরি করা শুরু করে।

উদাহরণস্বরূপ, নীচে আপনার সিএসএসের ভিতরে এটি যুক্ত করার চেষ্টা করুন, আপনার ডিজাইনটি যেখানেই ভাঙতে শুরু করবে সেখানে 320 পিক্সেল প্রস্থ পরিবর্তন করুন:

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

   body { 
      font-size: 2em; 
   }

}

ভিউপোর্ট শতাংশের দৈর্ঘ্য

এছাড়াও আপনি ব্যবহার করতে পারেন ভিউপোর্ট শতাংশ লেন্থ যেমন vw, vh, vminএবং vmax। এই জন্য সরকারী ডাব্লু 3 সি নথি:

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

আবার একই ডাব্লু 3 সি ডকুমেন্ট থেকে প্রতিটি পৃথক ইউনিটকে নীচে হিসাবে সংজ্ঞায়িত করা যায়:

vw ইউনিট - প্রাথমিক ধারণকারী ব্লকের প্রস্থের 1% এর সমান।

vh ইউনিট - প্রাথমিক সমন্বিত ব্লকের উচ্চতার 1% এর সমান।

vmin ইউনিট - vw বা vh এর ছোট সমান।

ভিএমএক্স ইউনিট - ভিডাব্লু বা ভিএইচ এর বৃহত্তর সমান।

এবং এগুলি অন্য যে কোনও সিএসএস মানের হিসাবে ঠিক একইভাবে ব্যবহৃত হয়:

.text {
  font-size: 3vw;
}

.other-text {
  font-size: 5vh;
}

সামঞ্জস্যতা এখানে দেখা যায় তুলনামূলকভাবে ভাল । তবে ইন্টারনেট এক্সপ্লোরার এবং এজ এর কিছু সংস্করণ ভিএমএক্স সমর্থন করে না। এছাড়াও, আইওএস 6 এবং 7 এর ভিএইচ ইউনিট নিয়ে একটি সমস্যা রয়েছে, যা আইওএস 8 এ স্থির হয়েছিল।

— পিটার ফেথেরস্টোন
সূত্র
44
কি হবে font-size: 1.5vw;?
— Dev_NIX
24
আরও ভাল,font-size: calc(12px + 1vw)
— কিউজক্স
3
@ দেভ_এনআইএক্স এটি সম্পর্কে কি?
— ক্রিশ্চিয়ান ওয়েস্টারবিইক
1
আমি পছন্দ কি @Cuzox উত্থাপন করা - এটা কি আমি খুঁজছেন ছিল এর
— ইলিয়াসর Resendez
@ কিউজক্স আপনার উত্তর জমা দিতে হবে যে, অন্যান্য সমাধানগুলি পরীক্ষার উপায়টিকে ক্ষুদ্রতর করে এনে যে কোনও কার্যকর উপকরণের জন্য এই পদ্ধতিগুলি ব্যবহার করতে সক্ষম হতে পারে। যখন আপনি স্থির উচ্চতার সাথে মিলিত হন এটি এটিকে দরকারী করে তোলে
— রিক্স
617

আপনি ems, pxs বা pts এর পরিবর্তে ভিউপোর্ট মানটি ব্যবহার করতে পারেন:

ভিউপোর্টের প্রস্থের 1vw = 1%

ভিউপোর্টের উচ্চতার 1vh = 1%

1vmin = 1vw বা 1vh, যেটি ছোট

1vmax = 1vw বা 1vh, যেটি বৃহত্তর

h1 {
  font-size: 5.9vw;
}
h2 {
  font-size: 3.0vh;
}
p {
  font-size: 2vmin;
}

সিএসএস-ট্রিকস থেকে: ভিউপোর্ট সাইজ টাইপোগ্রাফি

— সত্যিকারের সাপ
সূত্র
2
আমি বর্তমানে কেবল ওয়েবকিটকেই কোডিং করছি - আমি এই পরিমাপটির প্রেমে আছি ধন্যবাদ আপনাকে
— iamwhitebox
21
— সন্নিবেশকারী নাম এখানে
19
দুর্দান্ত, আমি টেক্সট স্কেল করতে ভিডাব্লু ব্যবহার করতে পারি যাতে এটি কোনও ডেস্কটপে ক্ষয় মনে হয় না! পারফেক্ট ... ওহ হু, ফোনে দেখার সময় এখন পাঠ্যটি খুব ছোট। ঠিক আছে, আমি এটি সর্বনিম্ন আকারের চেয়ে সঙ্কুচিত না হয়ে যায় তা নিশ্চিত করার জন্য কেবল "সর্বোচ্চ (x, y)" ব্যবহার করতে পারি। পারফেক্ট ... ওহ হুম। দেখে মনে হচ্ছে "সর্বোচ্চ" ক্রোম দ্বারা সঠিকভাবে সমর্থিত নয় isn't ঠিক আছে, অনুমান করুন আমি আবার "px" ব্যবহার করব।
— original_username
10
আকারটি মোবাইলগুলিতে খুব ছোট এবং উচ্চতর রেজোলিউশন ডেস্কটপগুলিতে খুব বড় হয়ে ওঠে বলে মনে হয় এটি আমার কাছে বাস্তবসম্মত নয়।
— মিঃগ্রিন
7
@ মিঃ গ্রীন: এজন্য আপনি মিডিয়া ক্যোয়ারী ব্যবহার করেন। ছোট ভিউপোর্টে, ফন্টটি আরও বড় করুন, আরও বড় ভিউপোর্টে ছোট করুন।
— অ্যালিস্টায়ার
45

আমি এই সমস্যাটি কাটিয়ে ওঠার বিভিন্ন উপায় নিয়ে খেলছি এবং বিশ্বাস করি যে আমি এর সমাধান পেয়েছি:

আপনি যদি ইন্টারনেট এক্সপ্লোরার 9 (এবং তারপরে) এবং অন্যান্য সমস্ত আধুনিক ব্রাউজারগুলির জন্য যেগুলি সিএসএস ক্যালক (), রিম ইউনিট এবং ভিমন ইউনিট সমর্থন করে তাদের জন্য আপনার অ্যাপ্লিকেশনটি লিখতে পারেন। আপনি মিডিয়া প্রশ্নগুলি ছাড়াই স্কেলযোগ্য পাঠ্য অর্জন করতে এটি ব্যবহার করতে পারেন:

body {
  font-size: calc(0.75em + 1vmin);
}

এখানে এটি কার্যকর হয়: http://codepen.io/csuwldcat/pen/qOqVNO

— csuwldcat
সূত্র
2
আমার এখানে লক্ষ্য রাখতে হবে যে পার্থক্যটি হ'ল দুটি ইউনিট একত্রিত করার জন্য ক্যালক ব্যবহার করা চূড়ান্তভাবে ভিডাব্লু টেক্সট স্কেলের প্রকরণকে নিঃশব্দ করার জন্য একটি সহজ উপায়।
— সসুয়েলডক্যাট
পুরানো ব্রাউজারগুলির সাথে সামঞ্জস্যের প্রয়োজন হয় না এমন কোনও প্রকল্পের জন্য ভিউপোর্ট ইউনিটগুলি দুর্দান্ত। এই ক্যালক ট্রিকটি আপনি যা বলেছেন ঠিক তেমনটি করে, পাঠ্যটি সহজেই স্কেলিং করে (মিডিয়া কোয়েরি দ্বারা নির্ধারিত কঠোর সীমাবদ্ধতার বিপরীতে) তবে স্ক্রিনের আকারের পরিবর্তনের চেয়ে কম (বা আরও উচ্চতর!) অনুপাতে
— ওয়ার্ড ডিএস
এটি কীভাবে ব্যবহার করা উচিত? আমি বলতে চাইছি, আমি যদি আমার ফন্টের আকার পরিবর্তন করতে চাই, তবে আমি কি কেবল ইম ইউনিট, কেবল ভিমন ইউনিট বা উভয়ই পরিবর্তন করব?
— স্নুব কুকুর
আমি এই অত্যন্ত সহজ সমাধানটি লিখতে এখানে এসেছি তবে তারপরে আপনার উত্তরটি দেখে এবং +1 দিয়েছি। আমরা এই সমাধানটি প্রতিটি উপাদানগুলিতে প্রয়োগ করতে পারি। উদাহরণস্বরূপ চিত্রের প্রস্থ: ক্যালক (50px + 10vw)
— y.selimdogan
35

mediaপ্রতিক্রিয়াশীল স্টাইলিংয়ের জন্য সিএসএস স্পেসিফায়ারগুলি (এটি তারা [zurb] ব্যবহার করে) ব্যবহার করুন:

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

   h1 {
      font-size: 3em;
   }

   h2 {
      font-size: 2em;
   }

}
— অ্যালবার্ট জিং
সূত্র
29

আপনি যদি কোনও jQuery সমাধান ব্যবহার করতে আপত্তি করেন না তবে আপনি টেক্সটফিল প্লাগইন চেষ্টা করতে পারেন

jQuery টেক্সটফিল একটি ধারক মধ্যে ফিট করতে পাঠ্যের আকার পরিবর্তন করে এবং ফন্টের আকারকে যতটা সম্ভব বড় করে তোলে।

https://github.com/jquery-textfill/jquery-textfill

— জাভি স্টলজ
সূত্র
15

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

একটি মিডিয়া ক্যোয়ারী ব্যবহার করুন , তবে এটিতে বেশ কয়েকটি ব্রেকপয়েন্টের জন্য ফন্টের আকার প্রয়োজন:

body
{
    font-size: 22px;
}

h1
{
    font-size: 44px;
}

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

% বা em এ মাত্রা ব্যবহার করুন । কেবল বেস ফন্টের আকারটি পরিবর্তন করুন, এবং সমস্ত কিছু পরিবর্তন হবে। পূর্ববর্তীটির মতো নয়, আপনি প্রতিবারই কেবল বডি ফন্টটি পরিবর্তন করতে পারেন এবং এইচ 1 নয় বা বেস ফন্টের আকারটি ডিভাইসের ডিফল্ট হতে হবে এবং সমস্ত কিছুতে em:

  1. "এমএস" (এম) : "ইম" একটি স্কেলযোগ্য ইউনিট। একটি ইমাম বর্তমান ফন্টের আকারের সমান, উদাহরণস্বরূপ, যদি নথির ফন্টের আকারটি 12 পিটি হয়, 1 ইমের সমান 12 পিটি হয়। Ems প্রকৃতির আকারে স্কেলেবল, সুতরাং 2 Em 24 pt, .5 em সমান 6 pt ইত্যাদি হবে would
  2. শতাংশ (%) : শতাংশ ইউনিট অনেকটা "Em" ইউনিটের মতো, কয়েকটি মৌলিক পার্থক্যের জন্য সংরক্ষণ করে। প্রথম এবং সর্বাগ্রে, বর্তমান ফন্টের আকারটি 100% (অর্থাৎ 12 পিটি = 100%) এর সমান। শতাংশ ইউনিট ব্যবহার করার সময়, আপনার পাঠ্য মোবাইল ডিভাইসগুলির জন্য এবং অ্যাক্সেসযোগ্যতার জন্য পুরোপুরি স্কেলযোগ্য remains

দেখুন kyleschaeffer.com / ....

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

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

দেখুন সিএসএস-ট্রিকস ... এবং তাকান আমি ব্যবহার করতে পারেন ...

— aWebDeveloper
সূত্র
13

প্রতিক্রিয়াশীল ফন্টের আকারগুলির জন্য আরও একটি পদ্ধতি রয়েছে - রিম ইউনিটগুলি ব্যবহার করে।

html {
    /* Base font size */
    font-size: 16px;
}

h1 {
    font-size: 1.5rem;
}

h2 {
    font-size: 1.2rem;
}

মিডিয়া ক্যোয়ারিতে পরে, বেস ফন্টের আকার পরিবর্তন করে আপনি সমস্ত ফন্টের আকারগুলি সমন্বয় করতে পারেন:

@media screen and (max-width: 767px) {
    html {
      /* Reducing base font size will reduce all rem sizes */
      font-size: 13px;
    }

    /* You can reduce font sizes manually as well */
    h1 {
        font-size: 1.2rem;
    }
    h2 {
        font-size: 1.0rem;
    }
}

ইন্টারনেট এক্সপ্লোরার 7 এবং ইন্টারনেট এক্সপ্লোরার 8 এ এই কাজটি করতে আপনাকে px ইউনিটগুলির সাথে ফ্যালব্যাক যুক্ত করতে হবে:

h1 {
    font-size: 18px;
    font-size: 1.125rem;
}

আপনি যদি কম নিয়ে বিকাশ করছেন এমন একটি মিশ্রণ তৈরি করতে পারেন যা আপনার জন্য গণিত করবে।

রিম ইউনিটগুলি সমর্থন করে - http://caniuse.com/#feat=rem

— ইউরি পি।
সূত্র
11

খুব ছোট স্ক্রিনে যাওয়ার সময় "ভিডাব্লু" সমাধানটিতে সমস্যা হয়। আপনি বেসের আকারটি সেট করতে এবং সেখান থেকে ক্যালক () নিয়ে যেতে পারেন:

font-size: calc(16px + 0.4vw);
— তৌতবিদাস বাগদিয়াস
সূত্র
আমি font-size: calc(1.2rem + 1vw)একটি শিরোনাম জন্য ব্যবহৃত । এইভাবে আমার একটি পিক্সেল ভিত্তিক ইউনিট ব্যবহার করার সুবিধা ছিল (যদিও এটি এখানে প্রযোজ্য নাও হতে পারে)। পুরানো ব্রাউজারগুলির জন্য আমার প্লে ইমেসে একটি ফলব্যাকও ছিল অবশেষে, যেহেতু এটি মোবাইলে কিছুটা ছোট হয়ে গেছে, আমি তাদের জন্য একটি মিডিয়া ক্যোয়ারী ব্যবহার করেছি। এটি খুব বিস্তৃত হতে পারে তবে এটি আমি যা চাইছিলাম তা করে বলে মনে হচ্ছে।
— ইভান ডোনভান
8

এটি আংশিকভাবে ফাউন্ডেশন 5 এ প্রয়োগ করা হয়।

ফাইল টাইপ.এসএসএসে তাদের দুটি শিরোনাম ভেরিয়েবল রয়েছে:

// We use these to control header font sizes
// for medium screens and above

$h1-font-size: rem-calc(44) !default;
$h2-font-size: rem-calc(37) !default;
$h3-font-size: rem-calc(27) !default;
$h4-font-size: rem-calc(23) !default;
$h5-font-size: rem-calc(18) !default;
$h6-font-size: 1rem !default;


// We use these to control header size reduction on small screens
$h1-font-reduction: rem-calc(10) !default;
$h2-font-reduction: rem-calc(10) !default;
$h3-font-reduction: rem-calc(5) !default;
$h4-font-reduction: rem-calc(5) !default;
$h5-font-reduction: 0 !default;
$h6-font-reduction: 0 !default;

মিডিয়াম আপের জন্য, তারা ভেরিয়েবলগুলির প্রথম সেটের উপর ভিত্তি করে মাপ তৈরি করে:

@media #{$medium-up} {
    h1,h2,h3,h4,h5,h6 { line-height: $header-line-height; }
    h1 { font-size: $h1-font-size; }
    h2 { font-size: $h2-font-size; }
    h3 { font-size: $h3-font-size; }
    h4 { font-size: $h4-font-size; }
    h5 { font-size: $h5-font-size; }
    h6 { font-size: $h6-font-size; }
}

এবং ডিফল্ট-অর্থাৎ ছোট পর্দার জন্য, তারা CSS তৈরি করতে ভেরিয়েবলগুলির একটি দ্বিতীয় সেট ব্যবহার করে:

h1 { font-size: $h1-font-size - $h1-font-reduction; }
h2 { font-size: $h2-font-size - $h2-font-reduction; }
h3 { font-size: $h3-font-size - $h3-font-reduction; }
h4 { font-size: $h4-font-size - $h4-font-reduction; }
h5 { font-size: $h5-font-size - $h5-font-reduction; }
h6 { font-size: $h6-font-size - $h6-font-reduction; }

আপনি এই ভেরিয়েবলগুলি ব্যবহার করতে পারেন এবং স্বতন্ত্র স্ক্রিনের আকারগুলির জন্য ফন্টের আকার নির্ধারণ করতে আপনার কাস্টম স্ক্যাস ফাইলটিতে ওভাররাইড করতে পারেন।

— Sudheer
সূত্র
6

ফ্লোটাইপ নামে পরিচিত এই জাভাস্ক্রিপ্ট কোডের সাথে একটি প্রতিক্রিয়াশীল ফন্টের আকারও করা যায় :

ফ্লোটাইপ - এর সর্বোত্তমতম সময়ে প্রতিক্রিয়াশীল ওয়েব টাইপোগ্রাফি: উপাদানগুলির প্রস্থের ভিত্তিতে ফন্ট-আকার।

অথবা এই জাভাস্ক্রিপ্ট কোডটিকে ফিটটেক্সট বলা হয় :

ফিটটেক্সট - ফন্ট-আকারকে নমনীয় করে তোলে। আপনার শিরোনামগুলির অনুপাত ভিত্তিক আকার পরিবর্তন করতে আপনার প্রতিক্রিয়াশীল ডিজাইনে এই প্লাগইনটি ব্যবহার করুন।

— phlegx
সূত্র
6

আপনি যদি কোনও বিল্ড টুল ব্যবহার করেন তবে রাকস্যাক চেষ্টা করুন।

অন্যথায় আপনি নূন্যতম এবং সর্বাধিক সর্বাধিক ফন্টের আকার ( ডেমো ) সহজেই নিয়ন্ত্রণ করতে সিএসএস ভেরিয়েবল (কাস্টম বৈশিষ্ট্য) ব্যবহার করতে পারেন :

* {
  /* Calculation */
  --diff: calc(var(--max-size) - var(--min-size));
  --responsive: calc((var(--min-size) * 1px) + var(--diff) * ((100vw - 420px) / (1200 - 420))); /* Ranges from 421px to 1199px */
}

h1 {
  --max-size: 50;
  --min-size: 25;
  font-size: var(--responsive);
}

h2 {
  --max-size: 40;
  --min-size: 20;
  font-size: var(--responsive);
}
— ড্যানি ভিঞ্জার
সূত্র
আপনি যে রুকস্যাকের কথা বলছেন তার কোনও উল্লেখ আছে ?
— পিটার মর্টেনসেন
5

আমি সিএসএস-ট্রিকস থেকে একটি দুর্দান্ত নিবন্ধ দেখেছি । এটি ঠিক কাজ করে:

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

উদাহরণ স্বরূপ:

body {
    font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
}

line-heightব্রাউজারের পাশাপাশি এটির পরিবর্তনের জন্য আমরা একই সমীকরণটি প্রয়োগ করতে পারি।

body {
    font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
    line-height: calc(1.3em + (1.5 - 1.2) * ((100vw - 300px)/(1600 - 300)));
}
— heyjr
সূত্র
সংজ্ঞায়িত [সর্বোচ্চ-আকার] এর চেয়ে বড় না হওয়ার জন্য ফন্ট-আকার তৈরি করার কোনও উপায় আছে কি?
— ইগোর জানকোভিয়
4

আমি সবেমাত্র একটি ধারণা নিয়ে এসেছি যার সাহায্যে আপনাকে কেবলমাত্র উপাদান হিসাবে ফন্টের আকার একবারে সংজ্ঞায়িত করতে হবে তবে এটি এখনও মিডিয়া প্রশ্নের দ্বারা প্রভাবিত।

প্রথমত, আমি মিডিয়া প্রশ্নগুলি ব্যবহার করে ভিউপোর্টের উপর নির্ভর করে "--text-স্কেল-ইউনিট" "" 1vh "বা" 1vw "তে পরিবর্তনশীল সেট করেছি set

তারপরে আমি ক্যালক () এবং আমার গুণক নম্বরটি ফন্ট-আকারের জন্য ব্যবহার করে ভেরিয়েবলটি ব্যবহার করি:

/* Define a variable based on the orientation. */
/* The value can be customized to fit your needs. */
@media (orientation: landscape) {
  :root{
    --text-scale-unit: 1vh;
  }
}
@media (orientation: portrait) {
  :root {
    --text-scale-unit: 1vw;
  }
}


/* Use a variable with calc and multiplication. */
.large {
  font-size: calc(var(--text-scale-unit) * 20);
}
.middle {
  font-size: calc(var(--text-scale-unit) * 10);
}
.small {
  font-size: calc(var(--text-scale-unit) * 5);
}
.extra-small {
  font-size: calc(var(--text-scale-unit) * 2);
}
<span class="middle">
  Responsive
</span>
<span class="large">
  text
</span>
<span class="small">
  with one
</span>
<span class="extra-small">
  font-size tag.
</span>
স্নিপেট প্রসারিত করুন

আমার উদাহরণে আমি কেবল ভিউপোর্টের ওরিয়েন্টেশন ব্যবহার করেছি, তবে যে কোনও মিডিয়া প্রশ্নের সাথে নীতিটি সম্ভব হওয়া উচিত।

— Ruffo
সূত্র
2
আপনি কেন এই ব্যবসায়টির পরিবর্তে vminএবং ব্যবহার করেন না ? vmax@media
— গার্ক গার্সিয়া
3

jQuery এর "ফিটটেক্সট" সম্ভবত সেরা প্রতিক্রিয়াশীল শিরোনাম সমাধান। এটি গিটহাবে দেখুন: https://github.com/davatron5000/FitText.js

— রাঘব কুক্রেতি
সূত্র
2
এটি হরফ কেন সামঞ্জস্য করে না এমন প্রশ্নের সরাসরি উত্তর বলে মনে হচ্ছে না। যাইহোক, লিঙ্ক কেবল উত্তরগুলি এসও তে উত্সাহিত হয় না। আরও বিশদ / নমুনা কোড যুক্ত বিবেচনা করুন।
— হ্যারি
2

অনেকগুলি ফ্রেমওয়ার্কের মতো, একবার আপনি "গ্রিডটি বন্ধ করে" যান এবং ফ্রেমওয়ার্কের ডিফল্ট সিএসএস ওভাররাইড করলে জিনিসগুলি বাম এবং ডান ভাঙ্গতে শুরু করবে। ফ্রেমওয়ার্কগুলি সহজাতভাবে অনমনীয়। আপনি যদি তাদের ডিফল্ট গ্রিড ক্লাসগুলির সাথে জুর্বের ডিফল্ট এইচ 1 স্টাইল ব্যবহার করেন তবে ওয়েবপৃষ্ঠাটি মোবাইলে সঠিকভাবে প্রদর্শন করা উচিত (অর্থাত্‍ প্রতিক্রিয়াশীল)।

তবে, এটি প্রদর্শিত হয় আপনি খুব বড় 6.2 এম শিরোনাম চান, যার অর্থ পোর্ট্রেট মোডে কোনও মোবাইল ডিসপ্লেতে ফিট করার জন্য পাঠ্যটি সঙ্কুচিত করতে হবে। আপনার সেরা বাজি হ'ল ফ্লোটাইপ এবং ফিটটেক্সট এর মতো একটি প্রতিক্রিয়াশীল পাঠ্য jQuery প্লাগইন ব্যবহার করা । আপনি যদি হালকা-ওজন কিছু চান তবে আপনি আমার স্কেলযোগ্য পাঠ্য jQuery প্লাগইনটি পরীক্ষা করে দেখতে পারেন:

http://thdoan.github.io/scalable-text/

নমুনা ব্যবহার:

<script>
$(document).ready(function() {
  $('.row .twelve h1').scaleText();
}
</script>
— thdoan
সূত্র
আমি মনে করি প্রতিক্রিয়াশীল ব্যবহারের জন্য স্কেলিং টেক্সটগুলি / আকার পরিবর্তন করার পাঠ্য ব্রাউজারে রেখে দেওয়া উচিত, বিশেষত মিডিয়া প্রশ্নগুলির জন্য তারা এর জন্য ডিজাইন করা হয়েছে eries
— ব্যবহারকারী 254197
2

প্রকৃত মূল Sass (না SCSS) আপনি স্বয়ংক্রিয়ভাবে সেট অনুচ্ছেদ এবং সব শিরোনাম 'থেকে mixins নিচে ব্যবহার করতে পারে font-size।

আমি এটি পছন্দ করি কারণ এটি আরও কমপ্যাক্ট। এবং টাইপ করা দ্রুত। তা ছাড়া এটি একই কার্যকারিতা সরবরাহ করে। যাইহোক, আপনি যদি এখনও নতুন সিনট্যাক্স - এসএসএসের সাথে লেগে থাকতে চান তবে আমার সাস বিষয়বস্তুকে এখানে এসএসএসে রূপান্তর করতে নির্দ্বিধায় অনুভব করুন: [ এখানে এসএসএসএসে কনভার্ট করুন]

নীচে আমি আপনাকে চারটি সাস মেশিন দিচ্ছি। আপনার সেটিংগুলিকে আপনার প্রয়োজন অনুসারে টুইট করতে হবে।

=font-h1p-style-generator-manual() // You don’t need to use this one. Those are only styles to make it pretty.
=media-query-base-font-size-change-generator-manual() // This mixin sets the base body size that will be used by the h1-h6 tags to recalculate their size in a media query.
=h1p-font-size-generator-auto($h1-fs: 3em, $h1-step-down: 0.3, $body-min-font-size: 1.2em, $p-same-as-hx: 6) // Here you will set the size of h1 and size jumps between h tags
=config-and-run-font-generator() // This one only calls the other ones

আপনি সেটিংসের সাথে খেলা শেষ করার পরে কেবল একটি মিশ্রণে কল করুন - যা হ'ল: + কনফিগারেশন এবং রান-ফন্ট-জেনারেটর () । নীচের কোড এবং আরও তথ্যের জন্য মন্তব্য দেখুন।

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

আপনার ফাইলটিতে এই মিশ্রণগুলি অনুলিপি করুন এবং আটকান:

=font-h1p-style-generator-manual()
  body
    font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif // google fonts
    font-size: 100%
    line-height: 1.3em
  %headers
    line-height: 1em
    font-weight: 700
  p
    line-height: 1.3em
    font-weight: 300
  @for $i from 1 through 6
    h#{$i}
      @extend %headers


=media-query-base-font-size-change-generator-manual()
  body
    font-size: 1.2em
  @media screen and (min-width: 680px)
    body
      font-size: 1.4em
  @media screen and (min-width: 1224px)
    body
      font-size: 1.6em
  @media screen and (min-width: 1400px)
    body
      font-size: 1.8em

=h1p-font-size-generator-auto($h1-fs: 3em, $h1-step-down: 0.3, $body-min-font-size: 1.2em, $p-same-as-hx: 6)
  $h1-fs: $h1-fs // Set first header element to this size
  $h1-step-down: $h1-step-down // Decrement each time by 0.3
  $p-same-as-hx: $p-same-as-hx // Set p font-sieze same as h(6)
  $h1-fs: $h1-fs + $h1-step-down // Looping correction
  @for $i from 1 through 6
    h#{$i}
      font-size: $h1-fs - ($h1-step-down * $i)
    @if $i == $p-same-as-hx
      p
        font-size: $h1-fs - ($h1-step-down * $i)

// RUN ONLY THIS MIXIN. IT WILL TRIGGER THE REST
=config-and-run-font-generator()
  +font-h1p-style-generator-manual() // Just a place holder for our font style
  +media-query-base-font-size-change-generator-manual() // Just a placeholder for our media query font size
  +h1p-font-size-generator-auto($h1-fs: 2em, $h1-step-down: 0.2, $p-same-as-hx: 5) // Set all parameters here

আপনার প্রয়োজনগুলিতে সমস্ত মিশ্রণগুলি কনফিগার করুন - এটির সাথে খেলুন! :) এবং তারপরে আপনার প্রকৃত SASS কোডের শীর্ষে কল করুন:

+config-and-run-font-generator()

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

জেনারেটেড সিএসএস:

body {
  font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 100%;
  line-height: 1.3em;
  word-wrap: break-word; }

h1, h2, h3, h4, h5, h6 {
  line-height: 1em;
  font-weight: 700; }

p {
  line-height: 1.3em;
  font-weight: 300; }

body {
  font-size: 1.2em; }

@media screen and (min-width: 680px) {
  body {
    font-size: 1.4em; } }
@media screen and (min-width: 1224px) {
  body {
    font-size: 1.6em; } }
@media screen and (min-width: 1400px) {
  body {
    font-size: 1.8em; } }
h1 {
  font-size: 2em; }

h2 {
  font-size: 1.8em; }

h3 {
  font-size: 1.6em; }

h4 {
  font-size: 1.4em; }

h5 {
  font-size: 1.2em; }

p {
  font-size: 1.2em; }

h6 {
  font-size: 1em;

}
— DevWL
সূত্র
2

আমি এই সিএসএস ক্লাস ব্যবহার করি এবং এগুলি যে কোনও পর্দার আকারে আমার পাঠ্যকে তরল করে তোলে:

.h1-fluid {
    font-size: calc(1rem + 3vw);
    line-height: calc(1.4rem + 4.8vw);
}

.h2-fluid {
    font-size: calc(1rem + 2vw);
    line-height: calc(1.4rem + 2.4vw);
}

.h3-fluid {
    font-size: calc(1rem + 1vw);
    line-height: calc(1.4rem + 1.2vw);
}

.p-fluid {
    font-size: calc(1rem + 0.5vw);
    line-height: calc(1.4rem + 0.6vw);
}
— গুঁজন
সূত্র
1 
 h1 { font-size: 2.25em; } 
 h2 { font-size: 1.875em; }
 h3 { font-size: 1.5em; }
 h4 { font-size: 1.125em; }
 h5 { font-size: 0.875em; }
 h6 { font-size: 0.75em; }
— রাজা রায়হান
সূত্র
6
যদিও এই কোড স্নিপেট একটি ব্যাখ্যা সহ প্রশ্নটি সমাধান করতে পারে, সত্যিই আপনার পোস্টের মান উন্নত করতে সহায়তা করে। মনে রাখবেন যে আপনি ভবিষ্যতে পাঠকদের জন্য প্রশ্নের উত্তর দিচ্ছেন, এবং সেই লোকেরা আপনার কোড পরামর্শের কারণগুলি জানেন না।
— টনি বাবারিনো
একটি ব্যাখ্যা ক্রম হবে।
— পিটার মর্টেনসেন
1

নিম্নলিখিত উপায় রয়েছে যার মাধ্যমে আপনি এটি অর্জন করতে পারেন:

  1. উদাহরণস্বরূপ ২.৩ রিম ব্যবহার করুন rem
  2. উদাহরণস্বরূপ 2.3 মিমি জন্য Em ব্যবহার করুন
  3. উদাহরণস্বরূপ ২.৩% এর জন্য% ব্যবহার করুন, আপনি ব্যবহার করতে পারেন: vh, vw, vmax এবং vmin ma

এই ইউনিটগুলি পর্দার প্রস্থ এবং উচ্চতার উপর নির্ভর করে অটোরেসাইজ করবে।

— প্রিয়ংশু তিওয়ারি
সূত্র
1

আপনি ফন্টের আকারটিকে ভিডাব্লু (ভিউপোর্টের প্রস্থ) এ সংজ্ঞায়িত করে প্রতিক্রিয়াশীল করতে পারেন। তবে, সমস্ত ব্রাউজার এটি সমর্থন করে না। সমাধানটি ব্রাউজারের প্রস্থের উপর নির্ভর করে বেস ফন্টের আকার পরিবর্তন করতে জাভাস্ক্রিপ্ট ব্যবহার করা এবং সমস্ত ফন্টের আকারকে% এ সেট করা।

প্রতিক্রিয়াশীল ফন্টসাইজগুলি কীভাবে বানাবেন সে সম্পর্কে এখানে একটি নিবন্ধটি দেওয়া আছে: http://wpsalt.com /

— দিমিত্রি পোচটেনেনিখ
সূত্র
নি: লিঙ্কটি অসম্পূর্ণ বলে মনে হয় "403 নিষিদ্ধ nginx / 1.10.3।"
— পিটার মর্টেনসেন
1

আমি এই সমাধানটি পেয়েছি এবং এটি আমার পক্ষে খুব ভালভাবে কাজ করে:

/* Fluid font size:
minimum font size at min. device width 300px = 14
maximum font size at max. device width 1600px = 26
*/

body {
    font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
}
— গুঁজন
সূত্র
1

ডেস্কটপ এবং মোবাইল / ট্যাবলেট উভয় ক্ষেত্রেই টেক্সটটির সমস্যাটি সমাধান করার এক উপায় হ'ল দৈহিক সেন্টিমিটার বা ইঞ্চি, যা স্ক্রিন পিপিআই (ইঞ্চি প্রতি পয়েন্ট) এর উপর নির্ভর করে না এমন শারীরিক ইউনিটগুলিতে পাঠ্যের আকার ঠিক করা।

এই উত্তরের ভিত্তিতে , এইচটিএমএল ডকুমেন্টের শেষে আমি একটি প্রতিক্রিয়াশীল ফন্ট আকারের জন্য ব্যবহার করি নীচের কোডটি:

<div id='testdiv' style='height: 1in; left: -100%; position: absolute; top: -100%; width: 1in;'></div>
<script type='text/javascript'>
  var devicePixelRatio = window.devicePixelRatio || 1;
  dpi_x = document.getElementById('testdiv').offsetWidth * devicePixelRatio;
  dpi_y = document.getElementById('testdiv').offsetHeight * devicePixelRatio;

  function setFontSizeForClass(className, fontSize) {
      var elms = document.getElementsByClassName(className);
      for(var i=0; i<elms.length; i++) {
          elms[i].style.fontSize = String(fontSize * dpi_y / 96) + "px";
      }
  }

  setFontSizeForClass('h1-font-size', 30);
  setFontSizeForClass('action-font-size', 20);
  setFontSizeForClass('guideline-font-size', 25);
  // etc for your different classes
</script>

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

একটি দৈহিক-ইউনিট ফন্টটি সর্বদা খুব বড় এবং খুব ছোট না হয়, যতক্ষণ না পর্দার দূরত্ব স্বাভাবিক হয় (বই-পঠনের দূরত্ব)।

— সার্জ রোগাচ
সূত্র
1

পাঠ্য আকারটি একটি vwইউনিটের সাথে সেট করা যেতে পারে যার অর্থ "ভিউপোর্টের প্রস্থ"। এইভাবে পাঠ্যের আকার ব্রাউজার উইন্ডোর আকার অনুসরণ করবে:

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_responsive_text

আমার ব্যক্তিগত প্রকল্পের জন্য আমি ভিডাব্লু এবং @ মাইদা ব্যবহার করেছি। এটি পুরোপুরি কাজ করে।

.mText {
    font-size: 6vw;
}

@media only screen and (max-width: 1024px) {
    .mText {
        font-size: 10vw;
    }
}


.sText {
    font-size: 4vw;
}

@media only screen and (max-width: 1024px) {
    .sText {
        font-size: 7vw;
    }
}
— পিটার মর্টেনসেন
সূত্র
1

এই সমীকরণটি ব্যবহার করুন:

calc(42px + (60 - 42) * (100vw - 768px) / (1440 - 768));

1440 এবং 768 এর চেয়ে বড় বা ছোট যেকোনো কিছুর জন্য আপনি একে স্থিতিশীল মান দিতে পারেন বা একই পদ্ধতির প্রয়োগ করতে পারেন।

ভিডাব্লু সলিউশনটির অপূর্ণতা হ'ল আপনি স্কেল রেশিও সেট করতে পারবেন না, বলুন পর্দার রেজোলিউশন 145-এ 5vw এর সমাপ্তি 60px হরফ আকার হতে পারে, আপনার ধারণার ফন্টের আকার হতে পারে, তবে আপনি উইন্ডোটির প্রস্থটি 768-এ সঙ্কুচিত করলে, এটি শেষ হয়ে যেতে পারে আপনি চান এমন সর্বনিম্ন নয়, 12px হচ্ছে।

এই পদ্ধতির সাহায্যে আপনি আপনার উপরের সীমানা এবং নিম্ন সীমানা নির্ধারণ করতে পারেন এবং ফন্টটি নিজেই এর মধ্যে স্কেল করবে।

— Shuwei
সূত্র
1

আমরা সিএসএস থেকে ক্যালক () ব্যবহার করতে পারি

p{
font-size: calc(48px + (56 - 48) * ((100vw - 300px) / (1600 - 300))) !important;
}

গাণিতিক সূত্রটি হ'ল ক্যালক (মিনিসাইজ + (ম্যাক্সাইজ - মিনিসাইজ) *) (100vm - মিনিভিউপোর্টভিডথ) / (ম্যাক্সভিডথভিউপোর্ট - মিনিভিউপোর্টউইথ)))

Codepen

— নিকো জেএল
সূত্র
0

আমি ভীত হলাম ফন্ট পুনরায় আকার দেওয়ার ক্ষেত্রে কোনও সহজ সমাধান নেই। আপনি মিডিয়া ক্যোয়ারী ব্যবহার করে হরফ আকার পরিবর্তন করতে পারেন, তবে প্রযুক্তিগতভাবে এটি সহজেই আকার পরিবর্তন করবে না। উদাহরণস্বরূপ, যদি আপনি ব্যবহার করেন:

@media only screen and (max-width: 320px){font-size: 3em;}

font-size300 পিক্সেল এবং 200 পিক্সেল প্রস্থের জন্য আপনার উভয়ই 3 এম হবে। font-sizeনিখুঁত প্রতিক্রিয়াশীল করতে আপনার 200px প্রস্থের কম প্রয়োজন ।

তো, আসল সমাধান কী? শুধুমাত্র একটি উপায় আছে। আপনাকে আপনার পাঠ্য সম্বলিত একটি পিএনজি চিত্র তৈরি করতে হবে (স্বচ্ছ পটভূমি সহ)। এর পরে আপনি সহজেই আপনার চিত্রটিকে প্রতিক্রিয়াশীল করতে পারেন (উদাহরণস্বরূপ: প্রস্থ: 35%; উচ্চতা: 28px)। এইভাবে আপনার পাঠ্য সমস্ত ডিভাইসের সাথে পুরোপুরি প্রতিক্রিয়াশীল হবে।

— user1712287
সূত্র
0

অনেক সিদ্ধান্তের পরে আমি এই সংমিশ্রণটি দিয়ে শেষ করেছি:

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

    h2 {
        font-size: 4.3vw;
    }
}
— হর্ষ গুপ্ত
সূত্র
-1

এখানে আমার জন্য কাজ করে এমন কিছু রয়েছে। আমি কেবল এটি একটি আইফোনে পরীক্ষা করেছি।

আপনার কাছে h1, h2বা pট্যাগগুলি এটি আপনার পাঠ্যের চারপাশে রাখবে:

<h1><font size="5">The Text you want to make responsive</font></h1>

এটি একটি ডেস্কটপে 22pt টেক্সট রেন্ডার করে এবং এটি আইফোনে এখনও পঠনযোগ্য।

<font size="5"></font>
— DMartin
সূত্র
14
এটি 2015। এইচটিএমএল 5 হিসাবে হরফ ট্যাগ হ'ল।
— ড্যান এইচ
আমি ভেবেছিলাম ফন্ট ট্যাগটি অপ্রচলিত বিকাশকারী.মোজিলা.আর.ইন.ইউএস / ডকস / ওয়েবে / এইচটিএমএল / এলিমেট / ফন্ট আমি মনে করি না যে এটি এখনও অবনমিত হয়েছে তবে এটি এক পর্যায়ে হবে।
— জেক 23
1
@ জেক: এটি এইচটিএমএল 4 এ অবমূল্যায়ন করা হয়েছিল এবং এইচটিএমএল 5 এর মাধ্যমে এটি অপ্রচলিত। অপসারণ অন্য উপায়ে নয়, অবচয় অনুসরণ করে।
— স্যান্টন
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.