এই সহজ ক্যালকুলেটরের সাহায্যে পিক্সেল (PX), রুট এম (REM), এবং এম (EM) CSS ইউনিটের মধ্যে রূপান্তর করুন। প্রতিক্রিয়াশীল ওয়েব ডিজাইন এবং উন্নয়নের জন্য অপরিহার্য।
পিক্সেল (PX), রুট এম (REM), এবং এম (EM) ইউনিটের মধ্যে রূপান্তর করুন। অন্য ইউনিটগুলিতে সমতুল্য মান দেখতে যে কোনও ক্ষেত্রে একটি মান প্রবেশ করান।
CSS ইউনিটগুলির মধ্যে বোঝাপড়া এবং রূপান্তর করা প্রতিক্রিয়াশীল ওয়েব ডিজাইন এবং উন্নয়নের জন্য অপরিহার্য। PX (পিক্সেল), REM (রুট এম), এবং EM ইউনিটগুলি মৌলিক নির্মাণ ব্লক যা বিভিন্ন ডিভাইস এবং স্ক্রীন আকার জুড়ে উপাদানগুলি কিভাবে আকার এবং অবস্থান নির্ধারণ করে তা নির্ধারণ করে। এই ব্যাপক ইউনিট কনভার্টার টুলটি আপনাকে এই তিনটি গুরুত্বপূর্ণ CSS ইউনিটের মধ্যে মানগুলি সহজেই অনুবাদ করতে দেয়, যা আপনাকে আরও নমনীয় এবং রক্ষণাবেক্ষণযোগ্য ওয়েব লেআউট তৈরি করতে সহায়তা করে।
পিক্সেল (PX) হল একটি নির্দিষ্ট আকারের ইউনিট যা সঠিক নিয়ন্ত্রণ প্রদান করে কিন্তু স্কেলেবিলিটি অভাব, যখন REM ইউনিটগুলি মূল উপাদানের ফন্ট আকারের সাথে তুলনামূলকভাবে স্কেল করে, এবং EM ইউনিটগুলি তাদের পিতামাতার উপাদানের ফন্ট আকারের সাথে তুলনামূলকভাবে স্কেল করে। এই ইউনিটগুলির মধ্যে রূপান্তর করা চ্যালেঞ্জিং হতে পারে, বিশেষ করে জটিল ডিজাইন বা পাঠ্য আকার পরিবর্তনের মতো অ্যাক্সেসিবিলিটি বৈশিষ্ট্য সমর্থন করার সময়। আমাদের PX, REM, এবং EM কনভার্টার এই প্রক্রিয়াটি সহজ করে, আপনাকে সুন্দর, প্রতিক্রিয়াশীল ডিজাইন তৈরি করতে মনোযোগ কেন্দ্রীভূত করতে দেয়।
পিক্সেল (PX) হল সবচেয়ে মৌলিক এবং সাধারণভাবে ব্যবহৃত CSS ইউনিট। একটি পিক্সেল হল একটি ডিজিটাল ইমেজ গ্রিডে একটি একক পয়েন্ট এবং এটি একটি স্ক্রীনে সবচেয়ে ছোট নিয়ন্ত্রণযোগ্য উপাদানকে প্রতিনিধিত্ব করে। CSS-এ, পিক্সেলগুলি একটি নির্দিষ্ট আকারের পরিমাপের ইউনিট প্রদান করে যা অন্যান্য স্টাইলিং ফ্যাক্টরের উপর নির্ভর করে স্থির থাকে।
1.element {
2 width: 200px;
3 font-size: 16px;
4 margin: 10px;
5}
6
পিক্সেলের মূল বৈশিষ্ট্য:
REM (রুট এম) ইউনিটগুলি আপেক্ষিক ইউনিট যা মূল উপাদানের ফন্ট আকারের (সাধারণত <html>
উপাদান) উপর ভিত্তি করে স্কেল করে। ডিফল্টভাবে, বেশিরভাগ ব্রাউজার মূল ফন্ট আকার 16px সেট করে, যার ফলে 1rem সমান 16px হয় যদি বিশেষভাবে পরিবর্তন না করা হয়।
1html {
2 font-size: 16px; /* বেশিরভাগ ব্রাউজারে ডিফল্ট */
3}
4
5.element {
6 width: 12.5rem; /* ডিফল্ট রুট ফন্ট সাইজের সাথে 200px সমান */
7 font-size: 1rem; /* 16px সমান */
8 margin: 0.625rem; /* 10px সমান */
9}
10
REM ইউনিটের মূল বৈশিষ্ট্য:
EM ইউনিটগুলি আপেক্ষিক ইউনিট যা তাদের পিতামাতার উপাদানের ফন্ট আকারের উপর ভিত্তি করে স্কেল করে। যদি পিতামাতার জন্য কোন ফন্ট আকার নির্দিষ্ট না করা হয়, তবে EMs উত্তরাধিকারী ফন্ট আকারের উপর ভিত্তি করে হবে।
1.parent {
2 font-size: 20px;
3}
4
5.child {
6 font-size: 0.8em; /* 16px সমান (20px × 0.8) */
7 margin: 0.5em; /* 8px সমান (16px × 0.5) */
8}
9
EM ইউনিটের মূল বৈশিষ্ট্য:
PX, REM, এবং EM ইউনিটগুলির মধ্যে গাণিতিক সম্পর্ক বোঝা সঠিক রূপান্তরের জন্য অত্যন্ত গুরুত্বপূর্ণ। আমাদের কনভার্টারে ব্যবহৃত সূত্রগুলি এখানে দেওয়া হল:
পিক্সেল থেকে REM ইউনিটে রূপান্তর করতে, পিক্সেল মানটি মূল ফন্ট আকার দ্বারা ভাগ করুন:
উদাহরণস্বরূপ, ডিফল্ট রুট ফন্ট সাইজ 16px সহ:
পিক্সেল থেকে EM ইউনিটে রূপান্তর করতে, পিক্সেল মানটি পিতামাতার উপাদানের ফন্ট আকার দ্বারা ভাগ করুন:
উদাহরণস্বরূপ, পিতামাতার ফন্ট সাইজ 16px সহ:
REM ইউনিট থেকে পিক্সেলে রূপান্তর করতে, REM মানটি মূল ফন্ট আকার দ্বারা গুণ করুন:
উদাহরণস্বরূপ, ডিফল্ট রুট ফন্ট সাইজ 16px সহ:
EM ইউনিট থেকে পিক্সেলে রূপান্তর করতে, EM মানটি পিতামাতার উপাদানের ফন্ট আকার দ্বারা গুণ করুন:
উদাহরণস্বরূপ, পিতামাতার ফন্ট সাইজ 16px সহ:
REM ইউনিটকে EM ইউনিটে রূপান্তর করতে, আপনাকে উভয় মূল ফন্ট সাইজ এবং পিতামাতার উপাদানের ফন্ট সাইজের জন্য হিসাব করতে হবে:
যদি উভয় রুট এবং পিতামাতার ফন্ট সাইজ একই (যেমন 16px) হয়, তবে 1rem = 1em।
EM ইউনিটকে REM ইউনিটে রূপান্তর করতে, নিম্নলিখিত সূত্র ব্যবহার করুন:
আবার, যদি উভয় ফন্ট সাইজ সমান হয়, তবে 1em = 1rem।
আমাদের ইউনিট কনভার্টার টুলটি PX, REM, এবং EM ইউনিটগুলির মধ্যে মানগুলি অনুবাদ করা সহজ করে তোলে। এখানে কনভার্টারটি কার্যকরভাবে ব্যবহার করার জন্য একটি পদক্ষেপ-দ্বারা-পদক্ষেপ গাইড:
<html>
ফন্ট-সাইজ মানের সাথে মেলানপ্রতিটি CSS ইউনিট ব্যবহার করার সময় এবং তাদের মধ্যে রূপান্তর করার সময় বোঝা অত্যন্ত গুরুত্বপূর্ণ। এখানে কিছু ব্যবহারিক অ্যাপ্লিকেশন এবং পরিস্থিতি যেখানে আমাদের ইউনিট কনভার্টার অমূল্য প্রমাণিত হয়:
ইউনিটগুলির মধ্যে রূপান্তর করা সত্যিই প্রতিক্রিয়াশীল ডিজাইন তৈরি করার জন্য অপরিহার্য:
1/* স্থির পিক্সেল মানগুলি প্রতিক্রিয়াশীল REM ইউনিটে রূপান্তর */
2.container {
3 /* থেকে: padding: 20px; */
4 padding: 1.25rem; /* 20px ÷ 16px = 1.25rem */
5
6 /* থেকে: margin-bottom: 32px; */
7 margin-bottom: 2rem; /* 32px ÷ 16px = 2rem */
8}
9
আপেক্ষিক ইউনিট ব্যবহার করে অ্যাক্সেসিবিলিটি উন্নত হয় ব্যবহারকারীর পছন্দগুলি সম্মান করে:
আধুনিক ডিজাইন সিস্টেমগুলি চিন্তাশীল ইউনিট ব্যবহারের সুবিধা পায়:
হারমনিয়াস টাইপোগ্রাফি তৈরি করতে যত্নশীল ইউনিট নির্বাচন প্রয়োজন:
1/* REM ইউনিট ব্যবহার করে টাইপোগ্রাফি সিস্টেম */
2h1 { font-size: 2.5rem; } /* 40px */
3h2 { font-size: 2rem; } /* 32px */
4h3 { font-size: 1.5rem; } /* 24px */
5h4 { font-size: 1.25rem; } /* 20px */
6p { font-size: 1rem; } /* 16px */
7small { font-size: 0.875rem; } /* 14px */
8
Figma বা Photoshop-এর মতো টুলগুলি থেকে ডিজাইন বাস্তবায়নের সময়:
যদিও PX, REM, এবং EM সবচেয়ে সাধারণ ইউনিট, কিছু বিকল্প বিবেচনা করার মতো:
CSS ইউনিটগুলির ইতিহাস ওয়েব ডিজাইনের বৃহত্তর বিবর্তনের প্রতিফলন, স্থির লেআউট থেকে আজকের প্রতিক্রিয়াশীল, অ্যাক্সেসযোগ্য পদ্ধতিতে।
CSS-এর প্রাথমিক দিনগুলিতে, পিক্সেলগুলি সর্বাধিক প্রাধান্য পেয়েছিল। ওয়েব ডিজাইনাররা সাধারণত 640px বা 800px প্রস্থের স্থির-প্রস্থ লেআউট তৈরি করতেন যাতে সাধারণ স্ক্রীন রেজোলিউশনগুলি পূরণ হয়। অ্যাক্সেসিবিলিটি এবং ডিভাইসের বৈচিত্র্য বড় উদ্বেগ ছিল না, এবং পিক্সেল-পারফেক্ট নিয়ন্ত্রণ ছিল প্রধান লক্ষ্য।
যেহেতু স্ক্রীনের আকারগুলি বৈচিত্র্যময় হয়ে উঠছিল, শতাংশ-ভিত্তিক লেআউট জনপ্রিয়তা অর্জন করেছিল। ডিজাইনাররা আরও নমনীয় ডিজাইন তৈরি করতে শুরু করেছিলেন, যদিও টাইপোগ্রাফি প্রায়শই পিক্সেল ইউনিটে রয়ে গিয়েছিল। এই যুগে CSS-এ EM ইউনিটের প্রবর্তন ঘটেছিল, যদিও তাদের গ্রহণযোগ্যতা সীমিত ছিল কারণ cascading ফন্ট আকার পরিচালনা করার জটিলতার কারণে।
2007 সালে আইফোনের প্রবর্তন ওয়েব ডিজাইনকে রূপান্তরিত করেছিল। হঠাৎ, ওয়েবসাইটগুলি 320px প্রস্থের মতো ছোট স্ক্রীনে কাজ করার প্রয়োজন ছিল। এটি প্রতিক্রিয়াশীল ডিজাইন কৌশল এবং আপেক্ষিক ইউনিটগুলির প্রতি আগ্রহের উত্থান ঘটায়। ডিজাইনগুলি আরও জটিল হওয়ার সাথে সাথে EM ইউনিটগুলির সীমাবদ্ধতা (বিশেষত cascading প্রভাব) আরও স্পষ্ট হয়ে উঠেছিল।
2010 সালে ইথান মার্কোটের প্রতিক্রিয়াশীল ওয়েব ডিজাইন সম্পর্কিত প্রভাবশালী নিবন্ধটি ডেভেলপারদের CSS ইউনিটগুলির প্রতি দৃষ্টিভঙ্গি পরিবর্তন করে। REM ইউনিট CSS3-এ প্রবর্তিত হয়, আপেক্ষিক স্কেলিংয়ের সুবিধাগুলি cascading EM ইউনিটগুলির জটিলতা ছাড়া অফার করে। এই সময়ে REM ইউনিটগুলির জন্য ব্রাউজার সমর্থন ধীরে ধীরে বৃদ্ধি পেয়েছিল।
আজকের ওয়েব ডেভেলপমেন্ট বিভিন্ন উদ্দেশ্যের জন্য ইউনিটগুলির একটি মিশ্রণ গ্রহণ করে:
এই বিবর্তনটি একটি ডকুমেন্ট-ভিত্তিক মাধ্যম থেকে একটি জটিল অ্যাপ্লিকেশন প্ল্যাটফর্মে ওয়েবের রূপান্তরের প্রতিফলন যা অসংখ্য ডিভাইস এবং প্রসঙ্গে কাজ করতে হবে।
1// PX, REM, এবং EM ইউনিটগুলির মধ্যে রূপান্তর
2const pxToRem = (px, rootFontSize = 16) => {
3 return px / rootFontSize;
4};
5
6const pxToEm = (px, parentFontSize = 16) => {
7 return px / parentFontSize;
8};
9
10const remToPx = (rem, rootFontSize = 16) => {
11 return rem * rootFontSize;
12};
13
14const emToPx = (em, parentFontSize = 16) => {
15 return em * parentFontSize;
16};
17
18const remToEm = (rem, rootFontSize = 16, parentFontSize = 16) => {
19 return rem * (rootFontSize / parentFontSize);
20};
21
22const emToRem = (em, parentFontSize = 16, rootFontSize = 16) => {
23 return em * (parentFontSize / rootFontSize);
24};
25
26// উদাহরণ ব্যবহার
27console.log(pxToRem(24)); // 1.5
28console.log(remToPx(1.5)); // 24
29console.log(pxToEm(24, 24)); // 1
30console.log(remToEm(2, 16, 32)); // 1
31
1:root {
2 /* বেস ফন্ট সাইজ */
3 --root-font-size: 16px;
4 --base-font-size: var(--root-font-size);
5
6 /* সাধারণ পিক্সেল মানগুলি REM-এ রূপান্তরিত */
7 --space-4px: 0.25rem;
8 --space-8px: 0.5rem;
9 --space-16px: 1rem;
10 --space-24px: 1.5rem;
11 --space-32px: 2rem;
12 --space-48px: 3rem;
13
14 /* টাইপোগ্রাফি স্কেল */
15 --text-xs: 0.75rem; /* 12px */
16 --text-sm: 0.875rem; /* 14px */
17 --text-base: 1rem; /* 16px */
18 --text-lg: 1.125rem; /* 18px */
19 --text-xl: 1.25rem; /* 20px */
20 --text-2xl: 1.5rem; /* 24px */
21}
22
23/* ব্যবহার উদাহরণ */
24.card {
25 padding: var(--space-16px);
26 margin-bottom: var(--space-24px);
27 font-size: var(--text-base);
28}
29
30.card-title {
31 font-size: var(--text-xl);
32 margin-bottom: var(--space-8px);
33}
34
1// ইউনিট রূপান্তরের জন্য SCSS ফাংশন
2@function px-to-rem($px, $root-font-size: 16) {
3 @return ($px / $root-font-size) * 1rem;
4}
5
6@function px-to-em($px, $parent-font-size: 16) {
7 @return ($px / $parent-font-size) * 1em;
8}
9
10@function rem-to-px($rem, $root-font-size: 16) {
11 @return $rem * $root-font-size * 1px;
12}
13
14// ব্যবহার উদাহরণ
15.element {
16 padding: px-to-rem(20);
17 margin: px-to-rem(32);
18 font-size: px-to-rem(18);
19
20 .nested {
21 // EM রূপান্তরের জন্য পিতামাতার ফন্ট সাইজ (18px)
22 padding: px-to-em(16, 18);
23 margin-bottom: px-to-em(24, 18);
24 }
25}
26
1def px_to_rem(px, root_font_size=16):
2 """পিক্সেল থেকে REM ইউনিটে রূপান্তর"""
3 return px / root_font_size
4
5def rem_to_px(rem, root_font_size=16):
6 """REM ইউনিট থেকে পিক্সেলে রূপান্তর"""
7 return rem * root_font_size
8
9def px_to_em(px, parent_font_size=16):
10 """পিক্সেল থেকে EM ইউনিটে রূপান্তর"""
11 return px / parent_font_size
12
13def em_to_px(em, parent_font_size=16):
14 """EM ইউনিট থেকে পিক্সেলে রূপান্তর"""
15 return em * parent_font_size
16
17# উদাহরণ ব্যবহার
18print(f"16px = {px_to_rem(16)}rem") # 16px = 1.0rem
19print(f"2rem = {rem_to_px(2)}px") # 2rem = 32px
20print(f"24px = {px_to_em(24, 16)}em") # 24px = 1.5em
21
REM (রুট এম) ইউনিটগুলি মূল উপাদানের ফন্ট আকারের উপর ভিত্তি করে (সাধারণত <html>
উপাদান), যখন EM ইউনিটগুলি তাদের পিতামাতার উপাদানের ফন্ট আকারের উপর ভিত্তি করে। এই মূল পার্থক্য মানে REM ইউনিটগুলি নেস্টিংয়ের উপর নির্ভর করে সঙ্গতিপূর্ণ আকার বজায় রাখে, যখন EM ইউনিটগুলি নেস্টেড হলে একটি কম্পাউন্ডিং প্রভাব তৈরি করতে পারে।
সব পরিস্থিতির জন্য একটি "সেরা" ইউনিট নেই। সাধারণত ইউনিটগুলির একটি সংমিশ্রণ সবচেয়ে কার্যকর:
সেরা পন্থা হল প্রতিটি ইউনিটকে একটি সঙ্গতিপূর্ণ সিস্টেমের মধ্যে তাদের সেরা কাজের জন্য ব্যবহার করা।
16px ডিফল্ট একটি পাঠযোগ্যতা মান হিসাবে প্রতিষ্ঠিত হয় যা ডিভাইস জুড়ে ভাল কাজ করে। গবেষণা দেখিয়েছে যে 16px এর চারপাশের পাঠ্য স্ক্রীনে সাধারণ দেখার দূরত্বে পড়ার জন্য অপটিমাল। এই ডিফল্টটি অ্যাক্সেসিবিলিটির জন্যও একটি ভাল ভিত্তি প্রদান করে, নিশ্চিত করে যে পাঠ্য বেশিরভাগ ব্যবহারকারীর জন্য খুব ছোট নয়।
হ্যাঁ, CSS নেতিবাচক মানগুলিকে যেকোনো ইউনিট প্রকার ব্যবহার করে সমর্থন করে। নেতিবাচক মার্জিন, স্থানান্তর এবং অবস্থানগুলি নেতিবাচক মানগুলির জন্য সাধারণ ব্যবহার ক্ষেত্র। আমাদের কনভার্টার সমস্ত ইউনিটের জন্য নেতিবাচক মানগুলি সঠিকভাবে পরিচালনা করে।
মিডিয়া কিউতে REM এবং EM ইউনিটগুলির জন্য ব্রাউজার সমর্থন উল্লেখযোগ্যভাবে উন্নত হয়েছে। মিডিয়া কিউতে EM ইউনিটগুলি সাধারণত সুপারিশ করা হয় কারণ:
1/* মিডিয়া কিউগুলির জন্য EM ইউনিট ব্যবহার */
2@media (min-width: 48em) { /* 768px with 16px base */
3 /* ট্যাবলেট শৈলী */
4}
5
6@media (min-width: 64em) { /* 1024px with 16px base */
7 /* ডেস্কটপ শৈলী */
8}
9
বেশিরভাগ ডিজাইন টুলগুলি প্রধানত পিক্সেলগুলির সাথে কাজ করে। ডিজাইন বাস্তবায়নের সময়:
কিছু ডিজাইন টুলে এই রূপান্তর প্রক্রিয়া স্বয়ংক্রিয়ভাবে সাহায্য করার জন্য প্লাগইন রয়েছে।
ব্রাউজারগুলি সাবপিক্সেল মানগুলি আলাদা করে পরিচালনা করে। কিছু ব্রাউজার নিকটতম পিক্সেলে গোল করে, যখন অন্যান্যগুলি মসৃণ স্কেলিংয়ের জন্য সাবপিক্সেল রেন্ডারিং সমর্থন করে। এটি মাঝে মাঝে বিভিন্ন ব্রাউজারের মধ্যে সামান্য অমিল সৃষ্টি করতে পারে, বিশেষ করে ছোট REM/EM মানগুলি বা যখন রূপান্তর করা হয়। বেশিরভাগ ব্যবহার ক্ষেত্রের জন্য, এই পার্থক্যগুলি তুচ্ছ।
আধুনিক ব্রাউজারে পিক্সেল, REM, বা EM ইউনিট ব্যবহারের মধ্যে উল্লেখযোগ্য পারফরম্যান্সের পার্থক্য নেই। ইউনিটগুলির পছন্দ ডিজাইন প্রয়োজনীয়তা, প্রতিক্রিয়াশীল আচরণ, এবং অ্যাক্সেসিবিলিটি প্রয়োজনীয়তার উপর ভিত্তি করে হওয়া উচিত পারফরম্যান্সের বিবেচনার উপর নয়।
"CSS Values and Units Module Level 3." W3C Recommendation. https://www.w3.org/TR/css-values-3/
Marcotte, Ethan. "Responsive Web Design." A List Apart, May 25, 2010. https://alistapart.com/article/responsive-web-design/
Rutter, Richard. "The Elements of Typographic Style Applied to the Web." http://webtypography.net/
"CSS Units." MDN Web Docs. https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units
"CSS Pixels vs. Physical Pixels." Stack Overflow Documentation. https://stackoverflow.com/questions/8785643/what-exactly-is-the-difference-between-css-pixels-and-device-pixels
Coyier, Chris. "The Lengths of CSS." CSS-Tricks. https://css-tricks.com/the-lengths-of-css/
"Using CSS custom properties (variables)." MDN Web Docs. https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
"Understanding and Using rem Units in CSS." SitePoint. https://www.sitepoint.com/understanding-and-using-rem-units-in-css/
হাতের CSS ইউনিট রূপান্তরের সাথে সংগ্রাম করা বন্ধ করুন এবং আমাদের PX, REM, এবং EM ইউনিট কনভার্টারটি আপনার জন্য কাজ করতে দিন। আপনি একটি প্রতিক্রিয়াশীল ওয়েবসাইট তৈরি করছেন, একটি ডিজাইন সিস্টেম তৈরি করছেন, বা শুধুমাত্র CSS ইউনিট সম্পর্কে শিখছেন, এই টুলটি আপনাকে সময় বাঁচাতে এবং সঠিকতা নিশ্চিত করতে সহায়তা করবে। এখন আপনার মানগুলি প্রবেশ করুন দেখুন কিভাবে ইউনিট কনভার্সন সহজ হতে পারে!
আপনার কাজে দরকারী হতে পারে আরো টুল খুঁজে বের করুন