Web Design এর জন্য em এবং rem কি এবং কেন ব্যবহার করবেন?
মোঃ আবুল বাশার | ১,৫৬৪ বার পঠিত | জানুয়ারী ১৮, ২০১৬ | এইচ টি এম এল,ওয়েব ডিজাইন | No | ৯:০৯ AM |
em এবং rem কি? এবং কেন?
em আর rem এই দুইটা ইউনিট সরাসরি ফন্ট সাইজের সাথে সম্পর্কিত। এবং মজার বিষয় হচ্ছে, দুইটাই আপেক্ষিক ফন্ট সাইজ। em নিয়ে আগে বলি, ধরেন আপনার একটা <div> এর মধ্যে একটা <p> আছে, এখন আপনার div টার font-size যদি আপনি 15px ঠিক করে দেন, তাহলে, আপনি যখন p টার ফন্ট সাইজ ঠিক করতে চাইবেন, তখন তা font-size:1em দিলে, আপনার p টারও ফন্ট সাইজ ১৫ পিক্সেল হবে, বলেন তো, 2em দিলে কি হবে? হুম ঠিক ধরেছেন, ৩০ পিক্সেল হবে! 3em, দিলে ৪৫ পিক্সেল। তাইলে বুঝেই গেছেন, em অর্থ প্যরেন্ট এলিমেন্ট এর ফন্ট সাইজের চেয়ে কতটা বড় বা ছোট। তবে এই ইউনিট যে শুধু ফন্ট সাইজের প্রোপার্টিতে কাজ করবে তা কিন্তু নয়, যেখানে px কাজ করে, প্রায় সব যায়গাতেই কাজ করতে, মানে ধরেন আপনি এমনটা যদি লিখেন, height:2em তাহলে কোনই ভুল হবেনা।
এখন আসি rem নিয়ে, r মানে রুট, আর বাকী সবকিছুই em এর মত, মানে em এ যেমন প্যরেন্ট এলিমেন্টের ফন্ট সাইজের সাথে সম্পর্কিত ছিল, এটা একেবারে রুট এলিমেন্ট মানে <html> এর ফন্ট সাইজের সাথে সম্পর্কিত। একবার শুধু ফন্ট সাইজ ঠিক করে দিয়ে পুরো ডকুমেন্টে আরামে rem ব্যবহার করতে পারবেন, যতবার ইচ্ছা ততবার, কেও মানা করতে আমাকে ডাক দিবেন না 😛 । আর মিডিয়া কুয়েরী দিয়ে স্ক্রিন সাইজ অনুযায়ী কয়েক্টা আলাদা ফন্ট সাইজ সেট করে দিতে পারলেই চমতকার রেসপন্সিভ টাইপোগ্রাফি হয়ে যাবে।
লেখাটা অন্য এক যায়গা থেকে কপি করে আনা হয়েছে, অনেকেরই কাজে লাগবে আশা করি।
মূল পোস্ট
যদি টিউটোরিয়ালটি আপনার কাছে ভালো লাগে Subscribe করতে ভুলবেন না।
আপনি যদি চান আমাদের ওয়েব সাইটে নতুন পোস্ট হওয়ার সাথে সাথে আপনাকে আমরা ইমেইলের মাধ্যমে জানাবো তাহলে Subscribe করুন।
This title last post
১,৫৬৪ বার পঠিত | জানুয়ারী ১৮, ২০১৬ | ৯:০৯ AM