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

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! 🥷