সাইজ এবং REM

Rem

Webflow ডিফল্টভাবে px ইউনিট ব্যবহার করে। যদি আমরা যেকোনো ডিজাইনার ইনপুটে "10" টাইপ করি এবং "Enter" চাপি, তাহলে সেটা "10px" হিসাবে সেট হবে।

Client-First rem নামের একক ব্যবহার করে, যা আমরা unit dropdown থেকে নির্বাচন করতে পারি।

rem কী ?

Rem এর মানে হলো "root em".

• মূল element এর ^font-size এর ওপর ভিত্তি করে, Rem হলো পরিমাপের একটি আপেক্ষিক একক।
• মূল element টি হলো ^html ।
• Rem ^html font size এর সাথে আপেক্ষিক অর্থাৎ তুলনামূলক।
• ‍Client-First এ প্রয়োগ করা বেশিরভাগ size rem এ রয়েছে।

ব্রাউজারের font size Inherit করে আনা

Client-First এ আমরা ব্রাউজার থেকে ^{html font-size} গুলো নিয়ে আসি।

ব্রাউজারগুলি প্রাথমিকভাবে 16px কে তাদের ডিফল্ট ^{html font-size} হিসাবে ব্যবহার করে।

1rem = 16px রূপান্তরটি, ব্রাউজারের ডিফল্ট ভাবে ব্যবহৃত হয়।

‍Client-First এ অনুমোদিত rem মানগুলির ভিত্তিতে, আমরা দ্রুত px এ রূপান্তর করতে পারি। উদাহরণস্বরূপ, Client-First অনুমোদিত rem মানগুলি হলো 0.5, 1, 1.5, 2, 2.5, 3 ইত্যাদি।

ব্রাউজারের font size এর সাথে সর্বশ্রেষ্ঠ accessibility অনুসরণের জন্য Rem এবং Client-First হলো একটি শক্তিশালী জোড়।

গাণিতীক হিসাব

ব্রাউজারের সেটিংসে "default" হিসাবে ^font-size সেট করা হলে, 16px সবসময় 1rem হয়।

যখন আমরা আমাদের Webflow প্রজেক্ট তৈরি করি, তখন rem হিসাবের জন্য আমরা সবসময় 16px কে আমাদের বেস(Base) মান হিসাবে ব্যবহার করি।

প্রতিটি rem পরিমাপ রূপান্তরটি 16 এর গুণিতক হয়।

px মানকে rem এ রূপান্তর করতে, এই মানটি 16 দিয়ে ভাগ করুন।

64px / 16px = 4rem

‍rem এর মানকে px এ রূপান্তর করতে এই মানটি 16 দিয়ে গুণ করুন।

2rem x 16px = 32px

সুবিধার জন্য, আমরা সুপারিশ করি সহজে পাঠযোগ্য rem মানগুলি ব্যবহার করতে যেমন 1, 2, 2.5, 3, 4, 5 ।

আমরা চাই এমন দীর্ঘ সংখ্যার মানগুলি যেমন 8.4375rem, এই জাতীয় মান গুলোর ধারাবাহিক ব্যবহারে দূরে থাকতে। এই মানগুলি মনে রাখা কঠিন এবং আমাদের কার্যপ্রবাহে আমাদের কাজের গতি কমিয়ে দেবে।

Webflow Designer এ গণনা কার্যক্রম

Webflow Designer এর অধিকাংশ unit ইনপুটে আমরা স্বাভাবিকভাবে rem গণনা করতে পারি।

ডিজাইনারের width ইনপুটের ভিতরে, "100/16rem" টাইপ করুন, "Enter" চাপুন এবং দেখুন rem মান হিসাবে গণনা হয়েছে।

Webflow Designer এর মধ্যে এর rem মান পেতে আমরা যেকোনো সংখ্যাকে 16 দ্বারা ভাগ করতে পারি।

Accessibility সুবিধা

Browser font size settings

ব্রাউজারগুলি তাদের ডিফল্ট ^html font size হিসাবে 16px ব্যবহার করে — এবং ব্যবহারকারীরা default font size সেটিংস আপডেট করতে পারেন। ব্যবহারকারীরা তাদের পছন্দ অনুযায়ী font size সেটিংস পরিবর্তন করতে পারেন।

ব্রাউজার font size সেটিংস accessibility -র জন্য একটি গুরুত্বপূর্ণ বিষয়। ব্যবহারকারীরা ব্রাউজার font আপডেট করলে, ওয়েবসাইটের সামগ্রিক অংশগুলি এই পরিবর্তনের সাথে সঙ্গতিপূর্ণভাবে সমন্বয় হতে হবে। Client-First এর rem সিস্টেমটি ব্যবহারকারীর ব্রাউজার font size সেটিংসের সাথে সঙ্গতিপূর্ণভাবে পরিবর্তন সমন্বয় করে।

‍

যখন আমরা px এবং vw এর মতো অন্যান্য ইউনিট পরিমাপে কাজ করি, তখন আমরা তাদের ব্রাউজার font size সেটিংস আপডেট করার জন্য ব্যবহারকারীর পছন্দগুলিকে উপেক্ষা করি।

Browser zoom

Rem ব্যবহারকারীর ব্রাউজারের zoom নিয়ন্ত্রণকেও সম্মান করে। যখন একজন ব্যবহারকারী page এ zoom in বা zoom out করে, তখন আমাদের layout এবং rem -এর content গুলো ব্যবহারকারীর পরিবর্তনের সাথে একসাথে zoom হবে।

যখন আমরা vw বা vh ইউনিট ব্যবহার করি, তখন ব্রাউজার zoom কাজ করবে না।

vw ব্রাউজার viewport width এর উপর নির্ভর করে (অথবা vh এর ক্ষেত্রে উচ্চতা)। শুধুমাত্র ব্রাউজার window তে পরিবর্তন করলেই সেই ইউনিটগুলিতে সেট করা size গুলিকে প্রভাবিত করবে।

Client-First সর্বোত্তম accessibility অনুশীলন অনুসরণ করে। rem-এ কাজ করার সিদ্ধান্ত সরাসরি এই accessibility এবং UX সুবিধার সাথে সম্পর্কিত।

rem ব্যবহার করে accessibility সম্পর্কে আরও জানতে, আমাদের Wizardry vs. Client-First comparison নিবন্ধ পড়ুন। Accessible পরিমাপ ইউনিট হিসাবে rem এর সুবিধাগুলির জন্য, এটি একটি প্রায়োগিক সংক্ষিপ্ত বিবরণ।

প্রস্তাবিত px থেকে rem এর মানগুলো

নীচে তাদের রূপান্তরিত px পরিমাপের সাথে সমস্ত প্রস্তাবিত rem মানগুলির একটি তালিকা রয়েছে ৷

এই Client-First অনুমোদিত মানগুলি হলো একটি সুপারিশ যা কঠোরভাবে প্রয়োজন নয়।

size এর এই তালিকাটি মিথষ্ক্রিয়াসম্পন্ন। sticky navigation মেনুর মাধ্যমে মান আপডেট করুন।

‍

{{We will add the px-rem calculator here}}

‍

Client-First এই মানগুলির সাথে কাজ করার পরামর্শ দেয়।

উপরের মানগুলি ব্যবহার করার জন্য 3টি ব্যতিক্রম ধরণ রয়েছে।‍

1. Typography

font-size এর জন্য 14px ব্যবহার করা একটি সাধারণ ব্যাপার এবং 16px খুব বড় হলে সুপারিশ করা হয়। প্রায়ই 12px font-size Typography -র জন্য খুব ছোট।‍

14px = 0.875rem

2. 2px spacing

ক্ষুদ্র ব্যবধানের জন্য 2px ব্যবহার করুন। 4px এর কম ব্যবধানের মান প্রয়োজন হলে, 2px ব্যবহার করুন।‍

2px = 0.125rem

3. 1px is 1px

‍1px ব্যবহার করার সময়, উদাহরণস্বরূপ একটি CSS ^border এ, মান হিসাবে 1px ব্যবহার করুন।

আমরা 1px মানকে rem এ রূপান্তর করাতে সুপারিশ করি না।

রেটিনা ডিভাইস গুলি নন-রেটিনা ডিভাইসের চেয়ে আলাদা scaling নিয়ম রয়েছে। 1px ব্যবহার করলে রেটিনা scaling এর হস্তক্ষেপ ছাড়াই যেকোনো ডিভাইসে ঠিক 1px লাইন তৈরি হবে।‍

1px = 1px

Finsweet Extension এ px থেকে rem এ রূপান্তর করার জন্য একটি টুল

Finsweet Extension আমাদের px এ তৈরি প্রজেক্টকে rem এ রূপান্তর করার জন্য একটি টুল অফার করে।

এটি প্রজেক্টের প্রতিটি মানকে px থেকে তার গণনাকৃত rem মান এ রূপান্তর করবে।

Finsweet Extension এর Client-First ট্যাবের ভিতরে, "PX to REM Migrator" ক্যান্ডি টি size ইউনিট রূপান্তর প্রক্রিয়া টি পরিচালনা করবে।