CSS ইউনিট কনভার্টার

CSS ইউনিট কনভার্সন কী?

CSS ইউনিট কনভার্টার হলো একটি টুল যা বিভিন্ন CSS পরিমাপ পদ্ধতির মধ্যে দৈর্ঘ্যের মান রূপান্তর করে। CSS এক ডজনেরও বেশি দৈর্ঘ্য ইউনিট সংজ্ঞায়িত করে, যা দুটি গ্রুপে বিভক্ত: পরম ইউনিট যেমন px, pt, cm এবং in যা নির্দিষ্ট physical মাপে ম্যাপ হয়, এবং আপেক্ষিক ইউনিট যেমন rem, em, vw, vh এবং % যা ফন্ট সাইজ বা ভিউপোর্ট মাত্রার মতো প্রেক্ষাপটের উপর নির্ভর করে।

ব্রাউজার রেন্ডারিংয়ের সময় সমস্ত CSS দৈর্ঘ্য পিক্সেলে রূপান্তর করে। আপনি যখন 1.5rem লেখেন, ব্রাউজার 1.5 কে রুট ফন্ট-সাইজ (সাধারণত 16px) দিয়ে গুণ করে 24px পায়। যখন আপনি 50vw লেখেন, এটি বর্তমান ভিউপোর্ট প্রস্থের অর্ধেক নেয়। এই সম্পর্কগুলো বোঝাটা জরুরি — তাহলেই এমন লেআউট বানাতে পারবেন যা বিভিন্ন ডিভাইসে ঠিকমতো scale করবে এবং ব্রাউজারের কাস্টম ফন্ট সাইজের মতো user preference মেনে চলবে।

CSS Values and Units Module Level 4 স্পেসিফিকেশন (W3C) সমস্ত পরম ইউনিটের মধ্যে সঠিক রূপান্তর অনুপাত সংজ্ঞায়িত করে: 1in = 96px = 72pt = 2.54cm = 25.4mm। আপেক্ষিক ইউনিটের কোনো নির্দিষ্ট অনুপাত নেই কারণ এগুলো রানটাইম প্রেক্ষাপটের উপর নির্ভর করে। একটি বিনামূল্যে CSS ইউনিট কনভার্টার আপনাকে আপনার নির্দিষ্ট রুট ফন্ট-সাইজ এবং ভিউপোর্ট মাত্রা দিয়ে কোনো কোড না লিখেই এই সম্পর্কগুলো তাৎক্ষণিকভাবে গণনা করতে দেয়।

CSS ইউনিট কনভার্টার কেন ব্যবহার করবেন?

হাতে CSS ইউনিট রূপান্তর করতে অনুপাত মনে রাখা, ক্যালকুলেটর বের করা এবং গণনা দুবার যাচাই করা লাগে। এই টুলটি আপনার ব্রাউজারে কোনো ঝামেলা ছাড়াই রূপান্তর করে।

CSS ইউনিট কনভার্টারের ব্যবহারের ক্ষেত্র

CSS দৈর্ঘ্য ইউনিট রেফারেন্স

CSS ১০টি সাধারণভাবে ব্যবহৃত দৈর্ঘ্য ইউনিট সংজ্ঞায়িত করে। পরম ইউনিটের পিক্সেলে একটি নির্দিষ্ট রূপান্তর আছে। আপেক্ষিক ইউনিট প্রেক্ষাপটের উপর নির্ভর করে: rem এর জন্য রুট ফন্ট-সাইজ, em এর জন্য প্যারেন্ট ফন্ট-সাইজ এবং vw ও vh এর জন্য ব্রাউজার ভিউপোর্ট।

পরম বনাম আপেক্ষিক CSS ইউনিট

পরম এবং আপেক্ষিক ইউনিটের মধ্যে বেছে নেওয়া আপনার লেআউট বিভিন্ন স্ক্রিন এবং ব্যবহারকারীর সেটিংসে কীভাবে সাড়া দেয় তা প্রভাবিত করে। প্রতিটি গ্রুপের আলাদা সুবিধা ও অসুবিধা আছে।

সাধারণ px থেকে rem রূপান্তর সারণী

এই সারণীতে 16px এর রুট ফন্ট-সাইজ ধরা হয়েছে (ব্রাউজারের ডিফল্ট)। আপনার প্রকল্প ভিন্ন বেস ব্যবহার করলে, rem সমতুল্য পেতে পিক্সেল মানকে আপনার বেস দিয়ে ভাগ করুন।

কোড উদাহরণ

এই উদাহরণগুলো দেখায় কীভাবে JavaScript, Python, CSS কাস্টম প্রপার্টি এবং Sass-এ প্রোগ্রামাটিকভাবে CSS ইউনিট রূপান্তর করতে হয়।

// px to rem (given root font-size of 16px)
const pxToRem = (px, base = 16) => px / base
pxToRem(24)  // → 1.5

// rem to px
const remToPx = (rem, base = 16) => rem * base
remToPx(1.5) // → 24

// px to vw (given viewport width of 1440px)
const pxToVw = (px, viewport = 1440) => (px / viewport) * 100
pxToVw(360)  // → 25

// Dynamic calculation using getComputedStyle
const rootFontSize = parseFloat(
  getComputedStyle(document.documentElement).fontSize
) // → 16 on most browsers

# CSS unit converter functions

def px_to_rem(px: float, base: float = 16) -> float:
    return px / base

def rem_to_px(rem: float, base: float = 16) -> float:
    return rem * base

def px_to_vw(px: float, viewport: float = 1440) -> float:
    return (px / viewport) * 100

def px_to_pt(px: float) -> float:
    return px * 72 / 96

print(px_to_rem(24))     # → 1.5
print(rem_to_px(2.5))    # → 40.0
print(px_to_vw(720))     # → 50.0
print(px_to_pt(16))      # → 12.0

/* Define a base scale using rem */
:root {
  --base: 16px;       /* root font-size */
  --space-1: 0.25rem; /* 4px */
  --space-2: 0.5rem;  /* 8px */
  --space-4: 1rem;    /* 16px */
  --space-8: 2rem;    /* 32px */
}

/* Fluid typography: scales between 1rem (16px) and 2.5rem (40px) */
h1 {
  font-size: clamp(1rem, 2.5vw + 0.5rem, 2.5rem);
}

/* Viewport-relative hero height */
.hero {
  height: calc(100vh - 4rem); /* full viewport minus 64px header */
}

/* Percentage-based grid */
.sidebar { width: 25%; }     /* 360px on 1440px screen */
.content { width: 75%; }     /* 1080px on 1440px screen */

// Reusable px-to-rem function in Sass
@use "sass:math";

$base-font-size: 16px !default;

@function rem($px) {
  @return math.div($px, $base-font-size) * 1rem;
}

// Usage
.card {
  padding: rem(24px);       // → 1.5rem
  margin-bottom: rem(32px); // → 2rem
  border-radius: rem(8px);  // → 0.5rem
  font-size: rem(14px);     // → 0.875rem
}

সচরাচর জিজ্ঞাসিত প্রশ্ন