Thet Hmuu
Caleb's Blog

Caleb's Blog

Responsive Font Sizes for "Every Device" Using CSS clamp()

Responsive Font Sizes for "Every Device" Using CSS clamp()

from smallest devices to more than 4K

Thet Hmuu's photo
Thet Hmuu
·Sep 19, 2021·

1 min read

font-sizeတွေကို ပုံမှန်လို ‘px’ unitနဲ့ပဲ သတ်မှတ််ပေးထားရင် small device တွေ very large deviceတွေနဲ့ ကြည့်ကြတဲ့အခါ သေးလွန်းတာ ကြီးလွန်းတာမျိုးဖြစ်ပြီး အဆင်မပြေဖြစ်တတ်တာ websiteတော်တော်များများမှာ တွေ့နေကျပါပဲ။

‘rem’ လိုမျိုး relative unitတွေသုံးပြီး ဒါကိုဖြေရှင်းလို့ရတယ်။ ဒါပေမယ့် media queryတွေ အမျိုးမျိုးပြန်ချိန်ရတယ်ဗျာ။ 🤔

အလွယ်လေးနဲ့အဆင်ပြေအောင် clampဆိုတဲ့ CSS functionလေးတစ်ခုနဲ့တွဲသုံးကြမယ်။ 💡

clamp()သုံးရင် parameter ၃ခု ထည့်ရပါတယ်။

.class {
  font-size: clamp(1rem, 2vmin, 3rem);
}

Read about ‘vmin’ unit
🔗 css-tricks.com/simple-little-use-case-vmin

အလယ်parameterက default ဘယ်ဘက်က smallest ညာဘက်က largestပါ။ ဘယ်deviceမှာ ဘယ်valueကို သုံးမယ်ဆိုတာ clampက automatically figure outလုပ်ပါတယ်။

ဒီတော့အပေါ်ကcodeက

.class {
  font-size: 2vmin;
  min-font-size: 1rem;
  max-font-size: 3rem;
}

ဆိုတဲ့အဓိပ္ပာယ်ပါပဲ။

clampကိုသုံးလိုက်တဲ့အတွက် font-sizeတွေက 2vmin ratioနဲ့ screen sizeကိုလိုက်ပြီး ပြောင်းပေးသွားမယ်။ ဒါပေမယ့် 1remထက် သေးမသွားဘူး 3remထက်လည်း ကြီးမသွားတော့ဘူးပေါ့။

Problem solved! 🥷

 
Share this