এই চারটি function একটি CSS মানকে hardcode-এর বদলে compute হতে দেয় — একক মেশানো, viewport-এ সাড়া দেওয়া, বা এখন কোনটা বড় বা ছোট তার উপর ভিত্তি করে দুটি মানের মধ্যে বেছে নেওয়া।
একটি expression-এ ভিন্ন একক মেশায় — plain CSS নিজে থেকে যা পারে না।
.sidebar {
width: calc(100% - 250px);
}
.box {
height: calc(100vh - 80px);
}সবচেয়ে সাধারণ calc() ভুল
calc()-এর ভেতরে প্রতিটি operator-এর চারপাশে একটি স্পেস দরকার — calc(100% -250px) অবৈধ, calc(100% - 250px) সঠিক।
যেকোনো মুহূর্তে যেটা ছোট সেই মান বেছে নেয় — একটি fixed maximum-এর বেশি হওয়া উচিত না এমন একটি width-এর জন্য useful।
.card {
width: min(90%, 600px); /* কখনো 600px-এর বেশি চওড়া না, কিন্তু ছোট screen-এ এর নিচে সংকুচিত হয় */
}.button {
padding: max(12px, 3%); /* কখনো 12px-এর ছোট না */
}clamp(minimum, preferred, maximum) — preferred মান ব্যবহৃত হয় যতক্ষণ এটা min আর max-এর মধ্যে থাকে।
.heading {
font-size: clamp(1.5rem, 4vw, 3rem);
/* কখনো 1.5rem-এর ছোট না, কখনো 3rem-এর বড় না,
মাঝখানে viewport width অনুযায়ী scale করে */
}| Function | বেছে নেয় |
|---|---|
| calc() | মেশানো একক math expression-এর ফলাফল |
| min() | list করা মানগুলোর মধ্যে সবচেয়ে ছোটটা |
| max() | list করা মানগুলোর মধ্যে সবচেয়ে বড়টা |
| clamp() | preferred মান, একটি min আর max-এর মধ্যে রাখা |
Interactively practice করুন
এই সাইটের Clamp tool (Tools-এর নিচে) একটি min/max size আর viewport range থেকে একটি clamp() মান generate করে — trial and error ছাড়াই fluid typography sizing ঠিক করার দ্রুততম উপায়।