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

কেন ডিজাইনার ও ডেভেলপাররা px থেকে rem রূপান্তর করেন

ডিজাইন টুল কথা বলে পিক্সেলে। একটি মকআপ বলে শিরোনাম 32 px, সেকশনের মধ্যে ফাঁক 48 px, বোতামে 16 px প্যাডিং। ভালোভাবে লেখা স্টাইলশিট কথা বলে rem-এ। এই দুই ভাষার মাঝের ফাঁকেই এই পাতা: আপনি পিক্সেলে একটি আকার টাইপ করেন আর তা rem-এ পড়েন, যাতে CSS-এ আপনি যে সংখ্যা বসান তা ডিজাইনার যা বুঝিয়েছিলেন সেটিই বোঝায়। px থেকে rem রূপান্তর একটি ছোট কাজ, কিন্তু একটি ওয়েবসাইটের জীবনে এটি শত শত বার করা হয়, আর একটি ভুল ভিত্তি একটি যত্নে বানানো লেআউটকে একসঙ্গে সর্বত্র সামান্য ভুল করে তোলে।

rem নিয়ে মাথা ঘামানোর কারণ হলো অভিগম্যতা ও নমনীয়তা। একটি rem হলো মূল ফন্ট সাইজের একটি গুণিতক, যা ব্রাউজার ঠিক করে 16 px, অন্যরকম না বললে, আর যা একজন পাঠক নিজের সেটিংসে বদলাতে স্বাধীন। rem-এ লেখা একটি লেআউট তাই কম দৃষ্টিশক্তির কেউ ডিফল্ট লেখার আকার বাড়ালে তার আকৃতি রাখে: লেখা, ফাঁক আর বাক্স একসঙ্গে বাড়ে। পিক্সেলে লেখা একটি লেআউট অনুসরণ করে না, আর যে পাঠক বড় লেখা চেয়েছেন তিনি পান সংকীর্ণ বাক্সে বড় অক্ষর, বা কিছুই না। সে কারণেই প্রায় প্রতিটি আধুনিক স্টাইল গাইড একই কথা বলে: লেখা ও ফাঁকের জন্য rem ব্যবহার করুন।

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

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

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

সূত্রটি একটি ভাগ: rem = px ÷ base। 16 px-এর স্বাভাবিক ভিত্তিতে 24 px আকার হয় 1.5 rem, 32 px হয় 2 rem আর 8 px হয় 0.5 rem। আপনি টাইপ করার সঙ্গে সঙ্গে পাতা ফল দেখায়, এবং যে ভিত্তি ব্যবহার করেছে তাও দেখায়, তাই 24 px = 1.5 rem (16 px) লাইনটি আপনাকে ঠিক বলে কী ধরে নেওয়া হয়েছে।

16 কোথা থেকে আসে

ভিত্তি শুরু হয় 16 px-এ কারণ কেউ অন্যরকম না বললে ব্রাউজার তা-ই ব্যবহার করে। এটি ওয়েবের কোনো আইন নয়; এটি ডিফল্টের ডিফল্ট, এবং কয়েক দশক ধরে স্থির। আপনার CSS কখনও মূল ফন্ট সাইজ না ছুঁলে, বেশির ভাগ দর্শকের জন্য 1 rem হলো 16 px। ছুঁলে ভিত্তি আপনি যা ঠিক করেন তা।

62.5% কৌশল আর মানুষ কেন তা ব্যবহার করে

কিছু স্টাইলশিট মূল আকার ঠিক করে 62.5%-এ, যা ডিফল্ট ব্রাউজারে 1 rem-কে 10 px-এর সমান করে, ফলে 24 px সরাসরি 2.4 rem হয় আর অঙ্ক মনে মনে করা সহজ। এটি কাজ করে, কিন্তু একটি খরচ আছে: পুরো পাতা এখন সেই শতাংশের ওপর নির্ভর করে, আর ভিত্তি হিসেবে 16 প্রত্যাশা করা যেকোনো কম্পোনেন্ট খুব ছোট বেরোবে। আপনার প্রকল্প এটি করলে এই পাতার ভিত্তি ঘরে 10 টাইপ করুন, আর প্রতিটি সংখ্যা আপনার CSS-এর সঙ্গে মিলবে।

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

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

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

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

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

গোল করা

16 দিয়ে ভাগ অনেক সাধারণ আকারের জন্য পরিচ্ছন্ন ফল দেয় (16, 24, 32, 48, 64) আর অন্যগুলোর জন্য আবৃত্ত দশমিক (10 px হলো 0.625 rem; 13 px হলো 0.8125)। পাতা সংখ্যার যতগুলো অঙ্ক দরকার ততগুলো দেয়, আর স্টাইলশিটে কতগুলো রাখবেন তা আপনি ঠিক করেন। ব্রাউজার লম্বা দশমিক ঝামেলা ছাড়াই সামলায়, কিন্তু 0.8125rem-এর মতো গোল করা একটি মান দশ অঙ্কের একটির চেয়ে পড়া ও রক্ষণাবেক্ষণ করা সহজ।

সাধারণ আকার

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

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

rem-এ গড়া একটি স্কেল

একটি কাজের অভ্যাস হলো rem মানের একটি ছোট সেট বেছে নিয়ে তা পুনরায় ব্যবহার করা: ফাঁকের জন্য 0.5, 1, 1.5, 2, 3 আর 4, এবং লেখার জন্য 0.875, 1, 1.25, 1.5, 2। ডিজাইনাররা একে বলেন স্কেল, আর এটি একটি সাইটকে দৃশ্যত সঙ্গতিপূর্ণ রাখে। একটি মকআপ আপনাকে 22 px-এর মতো বেখাপ্পা মান দিলে কনভার্টার ব্যবহার করে দেখুন যে তা 1.375 rem, তারপর ঠিক করুন আপনার স্কেলের নিকটতম মানে গোল করবেন কি না।

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

পিক্সেল মান টাইপ করুন

প্রথম ঘরে পিক্সেলে আকার দিন। দশমিক গ্রহণযোগ্য, তাই 13.5 px কাজ করে 14-এর মতোই।

ভিত্তি যাচাই করুন

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

rem মান কপি করুন

সংখ্যাটি পড়ুন এবং আপনার CSS-এ তার পরে একক লিখে ব্যবহার করুন: font-size: 1.5rem। একক ভুলবেন না, কারণ বেশির ভাগ প্রপার্টিতে একটি খালি সংখ্যা অন্য কিছু বোঝায়।

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

CSS পিক্সেল আপনার পর্দার পিক্সেল নয়

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

কেন rem আছে

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

বাস্তবে rem যেখানে দেখা যায়

লেখা

বডি টেক্সট সাধারণত 1 rem, শিরোনাম 1.25 থেকে 3 rem, ছোট ছাপা 0.75 থেকে 0.875 rem। এগুলো rem-এ লিখলে একজন পাঠক ব্রাউজারের একটি সেটিং বদলে পুরো পাতা বড় করতে পারেন।

ফাঁক আর লেআউট

rem-এ মার্জিন, প্যাডিং ও ফাঁক সাদা জায়গাকে লেখার অনুপাতে রাখে। লেখা বাড়লে তার চারপাশের জায়গাও বাড়ে, আর পুরোনো বাক্সে বড় অক্ষর ঠেসে দেওয়ার বদলে লেআউট ভারসাম্যে থাকে।

মিডিয়া কোয়েরি

em বা rem-এ লেখা ব্রেকপয়েন্ট পাঠকের লেখার আকারে সাড়া দেয়, তাই যিনি লেখা বড় করেছেন তাঁর জন্য লেআউট সংকীর্ণ রূপে আগে বদলে যায়। এটি জানার মতো একটি পরিমার্জনা, যদিও ব্রেকপয়েন্টে পিক্সেল এখনও প্রচলিত।

পিক্সেলে কী রেখে দেবেন

চুলের মতো সরু বর্ডার, বক্স শ্যাডো আর পাতলা আইকন প্রায়ই স্থির পিক্সেল আকারে সবচেয়ে ভালো দেখায়, কারণ 0.0625rem-এর একটি বর্ডার যা বড় লেখায় বেড়ে 0.1rem হয় কারও কাজে লাগে না। যা মাপে বদলানো উচিত তার জন্য rem আর যা নয় তার জন্য পিক্সেল ব্যবহার করুন।

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

ভুলে যাওয়া যে ভিত্তি সব সময় 16 নয়

একটি প্রকল্প html { font-size: 62.5% } ঠিক করলে, বা তরল মূল আকার ব্যবহার করলে, গুণক ভিন্ন। এই টুল সহ যেকোনো কনভার্টারের সংখ্যা বিশ্বাস করার আগে স্টাইলশিট যাচাই করুন।

মূল আকারই রূপান্তর করা

মূল আকার পিক্সেলে ঠিক করলে পাঠকের ব্রাউজার সেটিং উপেক্ষিত হয় এবং rem-এর সুবিধা হারায়। মূলটি শতাংশে ঠিক করুন, বা ছেড়ে দিন, যাতে ব্যবহারকারীর পছন্দ সম্মানিত হয়।

নিজের ফন্ট সাইজ ঠিক করা কম্পোনেন্টের ভেতরে rem ব্যবহার

Rem সব সময় মূলকে নির্দেশ করে, কম্পোনেন্টকে নয়। 14 px ফন্ট সাইজ আর 1rem প্যাডিংয়ের একটি বোতামের প্যাডিং বোতামের নিজের লেখা অনুসরণ করে না। আপনি উপাদানের লেখা অনুসরণ করে এমন ফাঁক চাইলে সেটি em-এর কাজ।

পরিকল্পনা ছাড়া একক মেশানো

যে স্টাইলশিট এক মার্জিনে px, পরেরটিতে rem আর তৃতীয়টিতে em ব্যবহার করে তা নিয়ে যুক্তি করা কঠিন। একটি নিয়ম বেছে নিন: লেখা ও ফাঁকের জন্য rem, বর্ডার আর শ্যাডোর জন্য পিক্সেল, এবং তাতে লেগে থাকুন।

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

16 px কত rem?

এক, একটি ডিফল্ট ব্রাউজারে। ষোলো ভাগ ভিত্তি ষোলো।

px-এর চেয়ে rem কি ভালো?

লেখা আর ফাঁকের জন্য বেশির ভাগ প্রকল্পে এটিই ভালো পছন্দ, কারণ এটি পাঠকের সেটিংস মানে। যা মাপে বদলানো উচিত নয় তার জন্য পিক্সেল ঠিক থাকে।

আমার ফল অন্য সাইটের থেকে আলাদা কেন?

সম্ভবত ভিন্ন ভিত্তি। ঘরটি যাচাই করুন: কিছু টুল ধরে 10, কিছু 16, কিছু 14। এই পাতা ফলের পাশে ভিত্তি দেখায়।

আমাকে কি গোল করতে হবে?

না। ব্রাউজার লম্বা দশমিক গ্রহণ করে। কেবল পাঠযোগ্যতার জন্য গোল করুন।

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

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

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

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

px থেকে rem রূপান্তরের সময় বুদ্ধিমানের সঙ্গে বাছাই

প্রকল্পের জন্য একটি ভিত্তি ঠিক করে তাতে লেগে থাকুন

যা-ই বেছে নিন, তাকে একটি সিদ্ধান্ত বানান এবং প্রকল্পের ডকুমেন্টেশনে লিখুন। ভিত্তি নিয়ে ভিন্নমত পোষণ করা একটি দল এমন কম্পোনেন্ট বানায় যা একসঙ্গে খাপ খায় না।

শেষ মুহূর্তে নয়, ডিজাইনের পর্যায়ে রূপান্তর করুন

মকআপ পড়ার সময় px থেকে rem রূপান্তর করলে আপনি স্কেলটি ডিজাইনে গেঁথে দেন এবং বেখাপ্পা মান আগেই চোখে পড়ে। শেষে করলে সেগুলো আবিষ্কার করেন অসঙ্গত সংখ্যার স্তূপ হিসেবে।

ভিউপোর্ট এককও বিবেচনা করুন

পর্দা ভরানো শিরোনামের জন্য px থেকে vw একটি আকারকে ভিউপোর্টের অংশ হিসেবে প্রকাশ করে। এটি rem থেকে ভিন্নভাবে মাপে বদলায়, আর দুটি প্রায়ই একসঙ্গে ব্যবহৃত হয়।

px থেকে rem রূপান্তর সহজ করার অভ্যাস

একটি রূপান্তর সারণি মাথায় রাখুন

16 ভিত্তিতে কয়েকটি নোঙর বেশির ভাগ কাজ ঢাকে: 4 px হলো 0.25 rem, 8 px হলো 0.5, 12 px হলো 0.75, 16 px হলো 1, 24 px হলো 1.5 আর 32 px হলো 2। একটি মকআপ আপনাকে এদের মাঝের কোনো মান দিলে পাতায় px থেকে rem রূপান্তর করার আগে আপনি আন্দাজ করতে পারেন, আর কনভার্টার ব্যবহার করেন কেবল নিশ্চিত হতে। কয়েক সপ্তাহ পর আপনি না দেখেই সারণি জানবেন।

ডিজাইন সিস্টেমকে কাজ করতে দিন

আপনার দল spacing-2 বা font-lg-এর মতো ডিজাইন টোকেন রাখলে সেগুলো একবার rem-এ সংরক্ষণ করুন, আর সবাইকে নামগুলো নির্দেশ করতে দিন। তাহলে আর কাউকে px থেকে rem রূপান্তর করতে হয় না, আর স্কেলের পরিবর্তন করা হয় এক জায়গায়। কনভার্টার সেই টুল যা আপনি টোকেন লেখার সময় ব্যবহার করেন, ব্যবহারের সময় নয়।

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

padding: 1.25rem; /* 20px */-এর মতো একটি লাইনের খরচ কয়েকটি অক্ষর আর তা পরের ডেভেলপারকে ক্যালকুলেটরের কাছে যাওয়া থেকে বাঁচায়। এটি এও রেকর্ড করে আপনি কোন ভিত্তি ধরেছিলেন, যা পরে মূল আকার বদলালে সাহায্য করে।

বদলানো ব্রাউজার সেটিংসে পরীক্ষা করুন

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

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

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

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

ধরুন একটি মকআপ একটি কার্ড শিরোনাম দেয় 28 px-এ, কার্ড প্যাডিং 20 px আর কার্ডের মধ্যে 12 px ফাঁক, এবং আপনার প্রকল্প ডিফল্ট 16 px ভিত্তি ব্যবহার করে। আপনি 28 টাইপ করে পড়েন 1.75 rem, 20 টাইপ করে পড়েন 1.25 rem, 12 টাইপ করে পড়েন 0.75 rem। স্টাইলশিটে আপনি লেখেন font-size: 1.75rem, padding: 1.25rem আর gap: 0.75rem। যে দর্শক ব্রাউজারের লেখার আকার বাড়িয়ে 20 px করেন তিনি একই কার্ড দেখেন, এক-চতুর্থাংশ বাড়ানো: শিরোনাম 35 px, প্যাডিং 25 px আর ফাঁক 15 px, সব অনুপাতে। আপনি পিক্সেল লিখলে শিরোনাম 28-এ থেকে যেত আর কার্ডটি ভুল দেখাত।

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

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

আপনার CSS যে ভিত্তি ব্যবহার করে তা জেনে নিন। ঠিক করুন কোন আকারগুলো মাপে বদলাবে আর কোনগুলো নয়।

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

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

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

ব্রাউজারে বড় ডিফল্ট লেখার আকারে পাতাটি পরীক্ষা করুন, আর খুঁজুন কোন বাক্স আর তার লেখা ধরে রাখছে না।

সাধারণ ভুল

ধরে নেওয়া যে 1 rem সব সময় 16 px

এটি কেবল তখন যখন কেউ মূল আকার বদলায়নি, আর কিছু পাঠক বদলেছেন। লেআউট এমনভাবে লিখুন যাতে অন্য আকারেও কাজ করে।

মূল আকার পিক্সেলে ঠিক করা

এটি পাঠকের পছন্দ উপেক্ষা করে। শতাংশ ব্যবহার করুন, বা ঠিকই করবেন না।

সবকিছু রূপান্তর করা

সব আকার মাপে বদলানো উচিত নয়। বর্ডার আর শ্যাডো পিক্সেলে রেখে দিন।

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

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

সারসংক্ষেপ

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