rem থেকে px রূপান্তর Root em ↔ Pixels বিনামূল্যে অনলাইন নিরাপদ

কেন আপনার rem থেকে px রূপান্তর দরকার

আপনি একটি স্টাইলশিট খোলেন আর দেখেন একটি কার্ডে padding: 2.25rem এবং একটি ক্যাপশনে font-size: 0.8125rem। এগুলো ভালো মান, আধুনিক CSS যেভাবে লেখা উচিত সেভাবে লেখা, আর একনজরে এগুলো আপনাকে কিছুই বলে না। পর্দায় কার্ডের সেই প্যাডিং কত বড়? ক্যাপশনটি কি পড়া যাবে? ডিজাইন ফাইলে আপনাকে দেওয়া 36 px আর 13 px-এর সঙ্গে কি তা মেলে? উত্তর দিতে আপনি rem থেকে px রূপান্তর করেন: মূল ফন্ট সাইজ দিয়ে গুণ করেন আর ডিজাইন টুলের ব্যবহৃত এককে উত্তর পড়েন। এটি স্বাভাবিক দিকের উল্টো, এবং কোড পড়ার সময়, একটি মকআপ বিল্ডের সঙ্গে মিলিয়ে দেখার সময় বা পিক্সেলে ভাবা কাউকে লেআউট বোঝানোর সময় আপনি তাই করেন।

রূপান্তর সহজ; একটি পাতার যোগ্য করে তোলে ভিত্তি। একটি rem কোনো আকার নয়, একটি আকারের গুণিতক, মূল উপাদানের ফন্ট সাইজ। যে ব্রাউজারকে কেউ অন্যরকম বলেনি তাতে সেই আকার 16 px, তাই 1 rem হলো 16 px, 2.25 rem হলো 36 px আর 0.8125 rem হলো 13 px। কিন্তু স্টাইলশিট মূল বদলাতে পারে, পাঠকও ব্রাউজারে তা বদলাতে পারেন, আর তখন পাতার প্রতিটি rem মান তার সঙ্গে সরে যায়। তাই পাতা ভিত্তিকে লুকিয়ে না রেখে চায় এবং ব্যবহার করে।

হিসাব হয় আপনার ব্রাউজারে আর কিছু আপলোড হয় না। নিচে আপনি পাবেন সূত্র, সাধারণ মানের একটি সারণি, রূপান্তর কী রাখে আর কী রাখতে পারে না, যেসব পরিস্থিতিতে ডেভেলপারদের rem থেকে px রূপান্তর করতে হয়, এবং rem-ভিত্তিক স্টাইলশিট সহজে পড়া রাখার কয়েকটি অভ্যাস।

সূত্র আর ভিত্তি

px সমান rem গুণ ভিত্তি

সূত্রটি একটি গুণ: px = rem × base। 16 px-এর স্বাভাবিক ভিত্তিতে 1.5 rem হয় 24 px, 0.75 rem হয় 12 px আর 4 rem হয় 64 px। পাতা ফলের পাশে ভিত্তি ছাপে, তাই 1.5 rem = 24 px (16 px)-এর মতো একটি লাইন বলে কী ধরে নিয়েছে এবং আপনার প্রকল্পের সঙ্গে মেলে কি না তা আপনি তখনই দেখেন।

আপনার ভিত্তি খুঁজে বের করা

স্টাইলশিটে html বা :root-এ font-size ঠিক করা একটি নিয়ম খুঁজুন। না থাকলে ভিত্তি ব্রাউজারের ডিফল্ট 16 px। থাকলে, যেমন 62.5%, 16-এর সেই শতাংশ নিন: 62.5% দেয় 10 px। ব্রাউজারের ডেভেলপার টুলে আপনি মূল উপাদান বেছে নিয়ে তার গণনা করা ফন্ট সাইজও পড়তে পারেন, যা ভিত্তি ঘরে টাইপ করার সংখ্যা।

যখন মূল আকার তরল

কিছু সাইট clamp রাশিমালা ব্যবহার করে মূল আকারকে উইন্ডোর সঙ্গে বাড়তে দেয়। তখন 1 rem-এর একক পিক্সেল মানই নেই: ফোনে এটি 15 px আর চওড়া মনিটরে 18 px। সেক্ষেত্রে যেকোনো রূপান্তর একটি স্ন্যাপশট। যে প্রস্থ আপনার কাছে গুরুত্বপূর্ণ সেখানে যে ভিত্তি দেখেন তা টাইপ করুন, আর বুঝুন যে উত্তরটি কেবল সেই প্রস্থেই বৈধ।

রূপান্তর কী রাখে আর কী পারে না

এটি অনুপাত রাখে

এক rem মূল ফন্ট সাইজ যা-ই হোক, তাই rem-এ লেখা একটি লেআউট সেই আকার বদলালে তার আকৃতি রাখে। rem থেকে px রূপান্তর করলে পিক্সেল মানটি একটি নির্দিষ্ট ভিত্তির জন্য মূর্ত করা সেই একই অনুপাত। দুটি আকারের মধ্যকার অনুপাত, যেমন 1 rem বডি টেক্সটের ওপর 2 rem শিরোনাম, আপনি যেভাবেই রূপান্তর করুন বদলায় না, আর একটি ভালো লেআউট সেই অনুপাতের ওপরই নির্ভর করে।

এটি আপনার পাঠকের সেটিংস জানতে পারে না

সংখ্যাটি পুরোপুরি ভিত্তির ওপর নির্ভর করে। পাঠক ব্রাউজারের ডিফল্ট লেখার আকার বাড়ালে, যা অনেকে করেন এবং করার অধিকার রাখেন, তাঁদের জন্য 1 rem আর 16 px নয়, আর আপনার দেখা সংখ্যা কেবল ঘরের ভিত্তির জন্য ঠিক। পিক্সেল মানকে ডিজাইন বোঝার একটি উপায় হিসেবে নিন, প্রতিটি দর্শক কী দেখবেন তার প্রতিশ্রুতি হিসেবে নয়।

গোল করা

যেহেতু ভিত্তি সাধারণত একটি পূর্ণসংখ্যা, গুণের ফল সাধারণত নিখুঁত। 16 ভিত্তিতে 0.8125 rem ঠিক 13 px; 0.6875 rem ঠিক 11 px। লম্বা দশমিক পেলে তা এই লক্ষণ যে rem মানটি আপনার টাইপ করা ভিত্তির চেয়ে ভিন্ন ভিত্তি থেকে গণনা করা হয়েছিল।

সাধারণ মান

পাতার নিচের সারণি

পাতায় আপনার ঠিক করা ভিত্তিতে সাধারণ rem সংখ্যাগুলো যে পিক্সেল মানের সঙ্গে মেলে তার একটি সারণি আছে: 0.5 rem হলো 8 px, 0.625 হলো 10, 0.75 হলো 12, 0.875 হলো 14, 1 হলো 16, 1.125 হলো 18, 1.25 হলো 20, 1.5 হলো 24, 2 হলো 32, 3 হলো 48 আর 4 হলো 64। ফাঁক আর টাইপ স্কেলে এই মানগুলোই সবচেয়ে বেশি দেখা যায়, আর এগুলো মুখস্থ জানা থাকলে একটি স্টাইলশিট একনজরে পড়া যায়।

পিক্সেলে একটি স্টাইলশিট পড়া

একটি কাজের অনুশীলন হলো আপনার লেখা নয় এমন একটি স্টাইলশিট নিয়ে তার প্রধান মানগুলো একবার পিক্সেলে অনুবাদ করা, ফল একটি নোটে লিখে। 1 rem বডি সাইজ, 1.5 আর 2.25 rem শিরোনাম, 2 rem কনটেইনার ফাঁক: পিক্সেলে 16, 24, 36 আর 32। এভাবে দেখলে ডিজাইনের যুক্তি ফুটে ওঠে, আর আপনি ক্যালকুলেটর ছাড়াই তা ডিজাইন ফাইলের সঙ্গে তুলনা করতে পারেন।

এখানে rem থেকে px কীভাবে রূপান্তর করবেন

rem মান টাইপ করুন

প্রথম ঘরে rem-এ আকার দিন। দশমিক গ্রহণযোগ্য, তাই 0.8125 কাজ করে 1-এর মতোই।

ভিত্তি ঠিক করুন

আপনার CSS মূল আকার না বদলালে এটি 16-তে রাখুন। বদলালে বদলান। আপনি টাইপ করার সঙ্গে সঙ্গে ফল হালনাগাদ হয়।

পিক্সেল মান পড়ুন

উত্তর তখনই দেখা দেয়, পাশে ভিত্তি দেখানো, যাতে আপনি বুঝতে পারেন কী ধরে নেওয়া হয়েছে। এটি আপনার নোটে কপি করুন বা ডিজাইন ফাইলের সঙ্গে তুলনা করুন।

এই এককগুলো কোথা থেকে এসেছে

CSS পিক্সেল

ডিসপ্লের ঘনত্ব যখন আর অনুমানযোগ্য রইল না, তখন প্রকৃত পিক্সেলে মাপা একটি পাতা এমন একটি পাতা হয়ে গেল যা পর্দা আরও তীক্ষ্ণ হওয়ার সঙ্গে সংকুচিত হয়। তাই CSS পিক্সেলকে নতুন করে সংজ্ঞায়িত করা হলো একটি রেফারেন্স দৈর্ঘ্য হিসেবে: আরামদায়ক পড়ার দূরত্বে দেখা এক ইঞ্চির প্রায় 1/96। তাই একটি স্টাইলশিটের পিক্সেল আপনার পর্দার একটি বিন্দু নয়, বরং দৈর্ঘ্যের একটি একক যাকে ব্রাউজার পর্দার যতগুলো বিন্দু দরকার ততগুলোয় রূপ দেয়।

rem

Em ওয়েবের চেয়ে পুরোনো: ধাতব টাইপে এটি ছিল ঢালাই করা একটি ব্লকের প্রস্থ, বড় হাতের M-এর নামে নাম, আর CSS-এ এর অর্থ কার্যকর ফন্ট সাইজ, যে কারণে উপাদান নেস্ট করলে তা বদলায়। Rem যোগ করা হয়েছিল ঠিক সেটি থেকে রেহাই পেতে: এটি মূল উপাদানের em এবং কখনও চক্রবৃদ্ধি হয় না। সংখ্যায় পার্থক্য দেখতে px থেকে em রূপান্তর করুন আর rem থেকে px রূপান্তর করে যা পান তার সঙ্গে তুলনা করুন।

ডেভেলপাররা কখন rem থেকে px রূপান্তর করেন

ডিজাইন ফাইলের সঙ্গে একটি বিল্ড যাচাই

একজন ডিজাইনার পিক্সেলে একটি ফাইল তুলে দেন; ডেভেলপার কোড লিখেছেন rem-এ। পাতা মেলে কি না যাচাই করতে তাঁরা rem থেকে px রূপান্তর করেন এবং সংখ্যা তুলনা করেন। অমিল তখনই ধরা পড়ে: 1.375 rem হলো 22 px, আর ডিজাইন 24 বললে তাদের একটি ভুল।

অপরিচিত কোড পড়া

একটি স্টাইলশিট উত্তরাধিকার সূত্রে পেলে rem মান প্রকৃত আকার লুকায়। প্রধান কয়েকটি রূপান্তর করলে আপনি ডিজাইনের একটি মানচিত্র পান: লেখা কত বড়, গাটার কত চওড়া, ব্রেকপয়েন্ট কোথায় পড়ে।

বাগ রিপোর্ট আর ডকুমেন্টেশন লেখা

যাঁরা একটি পাতা পরীক্ষা করেন তাঁরা যা দেখেন তা পিক্সেলে বর্ণনা করেন। একজন ডেভেলপার প্যাডিং 2.5 rem বললে একজন পরীক্ষকের কাছে তার অর্থ সামান্য; 40 px কিছু বোঝায়। রূপান্তর দুই পক্ষকে একে অপরকে বুঝতে দেয়।

পিক্সেলে নিখুঁত হতে হবে এমন মান ঠিক করা

কিছু জিনিস ডিভাইস পিক্সেলের নিখুঁত সংখ্যা হতে হয় নইলে ঝাপসা দেখায়: এক-পিক্সেলের বর্ডার, 24 px গ্রিডে আঁকা একটি আইকন। একটি আকার পিক্সেল গ্রিডে পড়তেই হলে rem থেকে px রূপান্তর আপনাকে বলে আপনার ভিত্তিতে তা পড়ে কি না।

rem থেকে px রূপান্তরের সময় ফাঁদ

বদলানো মূল আকার ভুলে যাওয়া

মূল 62.5% বা একটি clamp রাশিমালায় ঠিক করা থাকলে 16-র স্বাভাবিক গুণক প্রযোজ্য নয়। ফল দুই ভিত্তির অনুপাতে ভুল। সব সময় আগে ভিত্তি যাচাই করুন।

rem-কে em-এর সঙ্গে গুলিয়ে ফেলা

Em উপাদানের নিজের ফন্ট সাইজের সাপেক্ষে, মূলের নয়। 24 px-এর একটি শিরোনামের ভেতরে 1.5em মান 36 px, কিন্তু 16 px-এর একটি অনুচ্ছেদের ভেতরে তা 24 px। এই পাতা rem রূপান্তর করে, যাতে এমন দ্ব্যর্থতা নেই। em-এর জন্য দেখুন em থেকে px।

ধরে নেওয়া যে পর্দা একই পিক্সেল দেখায়

একটি CSS পিক্সেল ডিভাইস পিক্সেল নয়। উচ্চ-ঘনত্বের ডিসপ্লেতে একটি CSS পিক্সেল দুই বা তিনটি ডিভাইস পিক্সেল হতে পারে। রূপান্তর দেয় CSS পিক্সেল, যা ডিজাইন টুল ও স্টাইলশিট দুটিই ব্যবহার করে।

খুব আগে গোল করা

13.333 px-কে 13-এ গোল করে আবার রূপান্তর করলে আপনি পান 0.8125 rem, শুরুর 0.8333 নয়। যেখানে গুরুত্বপূর্ণ সেখানে মূল rem মান রাখুন।

রূপান্তরের আগে মানুষ যে প্রশ্ন করে

1 rem কত পিক্সেল?

ষোলো, যে ব্রাউজারের ডিফল্ট বদলানো হয়নি তাতে।

2 rem কত পিক্সেল?

ডিফল্ট ভিত্তিতে বত্রিশ। 10 ভিত্তিতে হতো 20।

আমার ব্রাউজার ভিন্ন কিছু দেখাচ্ছে কেন?

পাঠকের সেটিং বা স্টাইলশিটের একটি নিয়ম মূল আকার বদলেছে। ডেভেলপার টুলে মূল উপাদানের গণনা করা ফন্ট সাইজ দেখুন।

rem কি em-এর মতোই?

না। Rem মূল উপাদানকে নির্দেশ করে আর em উপাদানকে নিজেকে।

আমার সংখ্যা কি আপলোড হয়?

না। হিসাব চলে আপনার ব্রাউজারে আর কিছুই কোথাও পাঠানো হয় না।

কীভাবে ফিরে যাব?

px থেকে rem দিয়ে, যা গুণের বদলে ভাগ করে।

যে অভ্যাস rem স্টাইলশিট সহজে পড়া করে

মন্তব্যে পিক্সেল মান লিখুন

gap: 1.5rem; /* 24px */-এর মতো একটি লাইনের খরচ কয়েকটি অক্ষর আর তা পরের পাঠককে একটি রূপান্তর থেকে বাঁচায়। এটি এও রেকর্ড করে আপনি কোন ভিত্তি ধরেছিলেন।

একটি ছোট স্কেল ব্যবহার করুন

0.5, 1, 1.5, 2 আর 3-এর মতো মুষ্টিমেয় rem মান ব্যবহার করা একটি প্রকল্প শেখা সহজ: একদিন পর আপনি না ভেবেই সেগুলো পিক্সেলে জানেন। এমন স্টাইলশিটের জন্য rem থেকে px রূপান্তর করলে আপনি কেবল যা মনে আছে তা নিশ্চিত করছেন।

আপনার মানগুলোর নাম দিন

--space-md: 1.5rem-এর মতো কাস্টম প্রপার্টি দিয়ে স্টাইলশিট সংখ্যার বদলে উদ্দেশ্য বর্ণনা করে। নামটি অর্থ বহন করে, আর সংখ্যা এক জায়গায় থাকে।

ভিন্ন ডিফল্ট আকারে পরীক্ষা করুন

আপনার ব্রাউজারে ডিফল্ট লেখার আকার বাড়ান আর পাতাটি দেখুন। সব টিকে থাকলে লেআউট সত্যিই rem-এ গড়া। ভাঙলে কিছু পিক্সেলে রেখে দেওয়া হয়েছে।

rem থেকে px রূপান্তরের পর পিক্সেল মান ভালোভাবে ব্যবহার

শুধু সংখ্যা নয়, অনুপাত তুলনা করুন

একটি পুরো স্টাইলশিটের জন্য rem থেকে px রূপান্তর করলে আকারগুলো ছাড়াও তাদের মধ্যকার অনুপাত দেখুন। প্রতিটি ধাপ আগেরটির প্রায় 1.25 গুণ এমন একটি টাইপ স্কেল দেয় 16, 20, 25, 31 আর 39 পিক্সেল; 1.5-এর একটি স্কেল দেয় 16, 24, 36 আর 54। অনুপাত চিনলে আপনি ডিজাইনারের উদ্দেশ্য জানেন, আর নতুন আকার দরকার হলে সঙ্গতিপূর্ণভাবে স্কেল বাড়াতে পারেন।

পিক্সেলে ভাবা মানুষদের জন্য অনুবাদ করুন

দলের সবাই rem পড়েন না। প্রকল্প ব্যবস্থাপক, কপিরাইটার আর ক্লায়েন্টরা প্রায়ই স্ক্রিনশট থেকে কাজ করেন এবং একটি শিরোনাম একটু বড় করতে বলেন। আপনি বলতে পারলে যে শিরোনাম এখন 36 px আর 2.5 rem-এ হতো 40 px, কথোপকথন ছোট হয়। পাতাটি দুই শব্দভাণ্ডারের মধ্যে একটি দ্রুত সেতু হিসেবে কাজে লাগে।

টাচ টার্গেট আর সর্বনিম্ন আকার যাচাই করুন

টাচ স্ক্রিনের নির্দেশিকা অন্তত প্রায় 44 px-এর টার্গেট চায়, আর লেখার নির্দেশিকা বডি কপির জন্য প্রায় 16 px বা তার বেশি চায়। দুটিই পিক্সেলে বলা। rem-এ লেখা একটি স্টাইলশিটকে সেগুলোর বিপরীতে যাচাই করতে rem থেকে px রূপান্তর করুন আর দেখুন বোতাম ও লেখা রেখাটি পেরোয় কি না।

জুম করা অবস্থার কথা ভাবুন

আপনার পাওয়া মান আপনার টাইপ করা ভিত্তির জন্য। আপনার পাঠকেরা লেখা বড় করতে পারলে 20 বা 24 ভিত্তিতে রূপান্তরটি আবার চেষ্টা করুন আর দেখুন লেআউট পর্দার কাছে কী চায়। 16-তে আরামদায়ক একটি কার্ড 24-এ উপচে পড়তে পারে, আর জানার সেরা সময় পাতা প্রকাশের আগে।

সম্পর্কিত কনভার্টার

একই পরিবারের টুলগুলো পাশের রূপান্তরগুলো ঢাকে। rem-এ ফিরতে px থেকে rem ব্যবহার করুন। উপাদানের সাপেক্ষে আকারের জন্য আছে px থেকে em আর em থেকে px, এবং পর্দার সাপেক্ষে আকারের জন্য px থেকে vw আর vw থেকে px। একই স্টাইলশিটের রঙের জন্য HEX থেকে RGB আর HSL থেকে HEX হাতের কাছে, আর ক্লাসের নামের জন্য টেক্সট থেকে kebab-case একটি বাক্যাংশকে CSS গ্রহণযোগ্য নামে পরিণত করে।

একটি কাজের উদাহরণ

ধরুন আপনি একটি পুল রিকোয়েস্ট পর্যালোচনা করছেন আর স্টাইলশিটে একটি হিরো সেকশনে padding: 5rem 1.5rem, 3.5rem একটি শিরোনাম এবং 1.25rem একটি লিড অনুচ্ছেদ আছে। ডিজাইন ফাইল বলে 80 px আর 24 px প্যাডিং, একটি 56 px শিরোনাম আর একটি 20 px লিড। আপনি 5 টাইপ করে পড়েন 80 px, 1.5 টাইপ করে পড়েন 24, 3.5 টাইপ করে পড়েন 56, 1.25 টাইপ করে পড়েন 20। চারটিই মেলে, তাই বিল্ড বিশ্বস্ত। শিরোনাম 3.25 rem হলে আপনি পড়তেন 52 আর ডিজাইনারের কাছে পৌঁছানোর আগেই পার্থক্য ধরে ফেলতেন।

একটি সংক্ষিপ্ত চেকলিস্ট

রূপান্তরের আগে

ভিত্তি খুঁজুন: স্টাইলশিটে মূল নিয়ম, বা ডেভেলপার টুলে গণনা করা আকার।

রূপান্তরের সময়

rem মান টাইপ করুন, ফলের পাশে দেখানো ভিত্তি যাচাই করুন এবং পিক্সেল সংখ্যাটি টুকে রাখুন।

রূপান্তরের পর

ডিজাইন ফাইলের সঙ্গে তুলনা করুন। সংখ্যা আলাদা হলে কোডকে সন্দেহ করার আগে ভিত্তি যাচাই করুন।

সাধারণ ভুল

যাচাই না করে 16 ব্যবহার

এটি ডিফল্ট, নিয়ম নয়। মূল যাচাই করুন।

পিক্সেলকে চূড়ান্ত ধরা

উত্তরটি একটি ভিত্তির জন্য খাটে। বড় ডিফল্টের একজন পাঠক বড় পিক্সেল দেখেন।

rem আর em গুলিয়ে ফেলা

তারা দেখতে এক রকম আর আচরণ করে ভিন্ন। প্রতিটির জন্য ঠিক পাতা ব্যবহার করুন।

আপনার সংখ্যা আপনার ডিভাইসেই থাকে

হিসাব হয় স্থানীয়ভাবে। আপনার মান ব্যবহার করে আপনার নিজের ব্রাউজার আর কিছুই কোথাও পাঠানো হয় না। পরে মোছার কিছু নেই আর বানানোর কোনো অ্যাকাউন্টও নেই। rem থেকে px রূপান্তরের সহজ পথ এটাই।

সারসংক্ষেপ

এখানে rem থেকে px রূপান্তর করতে rem-এ আকার টাইপ করুন আর সূত্র px = rem × base ব্যবহার করে তখনই পিক্সেলে পড়ুন। ভিত্তি শুরু হয় 16 px-এ, ব্রাউজারের ডিফল্টে, আর আপনি তা আপনার CSS-এর সঙ্গে মেলাতে বদলাতে পারেন। রূপান্তর অনুপাত রাখে, কারণ এক rem মূল ফন্ট সাইজ যা-ই হোক তা, এবং এটি আপনার পাঠকের সেটিংস জানতে পারে না, তাই সংখ্যাটি কেবল ঘরের ভিত্তির জন্য ঠিক। 8 px-এ 0.5 rem থেকে 64 px-এ 4 rem পর্যন্ত সাধারণ মানের সারণি আপনাকে একনজরে স্টাইলশিট পড়তে সাহায্য করে। কিছু আপলোড হয় না।