TechBlogSD - ওয়ার্ডপ্রেস এবং ওয়েব ডেভেলপমেন্টের জন্য সবকিছু
ওয়েব এবং ওয়ার্ডপ্রেস নির্দেশাবলী, খবর, থিম এবং প্লাগইনগুলির পর্যালোচনা

CSS ইউনিট টিউটোরিয়াল

10

ফন্ট-সাইজ, লাইন-হাইট, মার্জিন, প্যাডিং, প্রস্থ, উচ্চতা ইত্যাদি বৈশিষ্ট্যের পরিমাপ দৈর্ঘ্য ইউনিট ব্যবহার করে CSS- এ করা হয়। CSS- এ চারটি মৌলিক ধরনের দৈর্ঘ্য ইউনিট ব্যবহার করা হয় – আপেক্ষিক, পরম, কোণ এবং সময়। এই প্রবন্ধে, আসুন আমরা দেখি কিভাবে এই দৈর্ঘ্য ইউনিটগুলি উদাহরণ সহ কাজ করে।

সম্পর্কিত: কিভাবে CSS এবং jQuery দিয়ে শীর্ষ উইজেটে স্ক্রোল তৈরি করবেন?

আপেক্ষিক দৈর্ঘ্য ইউনিট

ভিতরে মূল উপাদানটির বর্তমান ফন্ট-সাইজের তুলনায় গণনা করা হয়েছে। উদাহরণস্বরূপ, 2em বর্তমান উপাদানটির ফন্ট-সাইজের 2 গুণ বড় আকার নির্দেশ করে।
প্রাক্তন বর্তমান ফন্ট-সাইজের উচ্চতা আপেক্ষিকভাবে গণনা করা হয়েছে।
px পিক্সেলের আকার দেখার যন্ত্রের তুলনায় গণনা করা হয়। কম ডিপিআই ডিভাইসের জন্য 1px ডিসপ্লেতে একটি বিন্দু। উচ্চ-রেজোলিউশনের স্ক্রিনের জন্য, 1px একাধিক ডিভাইস পিক্সেল নির্দেশ করতে পারে।
% যেকোনো উপাদানের তুলনায় শতকরা মান। উদাহরণস্বরূপ, পাত্রে 50% প্রস্থ।
rem মূল উপাদানটির ফন্ট-সাইজের সাথে সম্পর্কিত।
vw ভিউপোর্টের প্রস্থের শতকরা মান হিসেবে পরিমাপ করা হয়। যদি ভিউপোর্টের প্রস্থ 100cm হয় তাহলে 1vw = 1cm।
vh ভিউপোর্টের উচ্চতার শতাংশ মান হিসাবে পরিমাপ করা হয়। যদি ভিউপোর্টের উচ্চতা 100cm হয় তাহলে 1vh = 1cm।
vmin ছোট ভিউপোর্ট মাত্রার শতকরা মান। এটি ইন্টারনেট এক্সপ্লোরার 9 এবং এর উপরের সংস্করণগুলিতে “ভিএম” হিসাবে সমর্থিত।
vmax বৃহত্তর ভিউপোর্ট মাত্রার শতকরা মান। এটি IE দ্বারা সমর্থিত নয়।
সিএইচ শূন্য (0) প্রস্থের তুলনায় আপেক্ষিক।

"Vmin" এবং "vmax" ইন্টারনেট এক্সপ্লোরার দ্বারা সমর্থিত নয়। নন-স্ট্যান্ডার্ড ইউনিট "ভিএম" IE 9 বা তার পরে সমর্থিত। এটি ভিউপোর্টের উচ্চতা বা প্রস্থের সর্বনিম্ন বিবেচনা করে আপেক্ষিক মান গণনা করে।

পরম দৈর্ঘ্য একক

ভিতরে ইঞ্চিতে পরম মান। 1 ইঞ্চি = 2.54 সেন্টিমিটার।
সেমি সেন্টিমিটার
মিমি মিলিমিটার
জন্য পয়েন্ট (1 পয়েন্ট = 1/72 ইঞ্চি)
পিসি ছবি (1 ছবি = 12 পয়েন্ট)

কোণ ইউনিট

আপনি ডিগ্রী
1 গ গ্রেডিয়ানরা
কাজ রেডিয়ান
পালা পালা

সময় ইউনিট

মাইক্রোসফট মিলিসেকেন্ড
গুলি সেকেন্ড

উদাহরণ

নিচে কিছু উদাহরণ দেওয়া হল, কিভাবে বিভিন্ন CSS দৈর্ঘ্য ইউনিট পাঠ্য বিষয়বস্তুর প্রদর্শনকে প্রভাবিত করে। মূলত আমরা আপেক্ষিক এবং পরম মান দেখিয়েছি কারণ পাঠ্য বিষয়বস্তুর জন্য কোণ/সময় একক প্রযোজ্য নয়।

এটি 2em আকারের ফন্ট। মৌলের ফন্ট-সাইজ 18px এবং তাই এই লাইনটি অপেক্ষাকৃত 36px (2 × 18) হিসাবে গণনা করা হয়।

এই ফন্টটি আকার 20px এবং লাল রঙের।

এটি 36px এবং নীল রঙের ফন্ট। এটি 2em আকারের সমতুল্য কারণ ফন্ট-সাইজ 18px।

এটি 18px এবং সবুজ রঙের ফন্ট। প্রস্থ উপাদানটির মোট প্রস্থের 50% পর্যন্ত সীমাবদ্ধ। পূর্ববর্তী বাক্যের তুলনায় প্রস্থ সীমাবদ্ধ দেখানোর জন্য আমরা আরো বিষয়বস্তু যোগ করি।

এই লাইনটি font-size = 2ex ভ্যালু দিয়ে তৈরি করা হয়েছে।

এই লাইনটি font-size = 2rem ভ্যালু দিয়ে তৈরি করা হয়েছে যা রুট এলিমেন্টের পিক্সেল ভ্যালু 36px (2 × 18) এর 2 গুণ।

এই লাইনটি ফন্ট-সাইজ = 15vh ভ্যালু দিয়ে তৈরি করা হয়েছে, এই টেক্সটটি কীভাবে পরিবর্তন হয় তা দেখতে ব্রাউজারের উচ্চতার আকার পরিবর্তন করুন।

এই লাইনটি font-size = 0.5cm পরম মান দিয়ে তৈরি করা হয়েছে।

এই লাইনটি font-size = 2pc পরম মান দিয়ে তৈরি করা হয়েছে।

সম্পর্কিত: নতুনদের জন্য CSS বক্স মডেল টিউটোরিয়াল

কোণ এবং সময় একক

কোণ এবং সময় একক দৈর্ঘ্য মান ব্যবহার করা হয় না। কিন্তু সাধারণত সিএসএস রূপান্তর এবং রূপান্তর অ্যানিমেশন বৈশিষ্ট্যগুলির সাথে নীচের মত ব্যবহার করা হয়:

.image { transform: rotate(10rad); transition-duration: 2s; }

CSS- এ দৈর্ঘ্য ইউনিট ব্যবহার করার সময় মনে রাখার বিষয়গুলি

নিচে সিএসএস ইউনিট ব্যবহার করার সময় কিছু গুরুত্বপূর্ণ বিষয় মনে রাখতে হবে:

  • সাধারণত "em" এবং "rem" মানগুলি ভাল লেআউট তৈরি করতে ব্যবহৃত হয়।
  • "Em" মূল উপাদানটির ফন্ট-সাইজ বৈশিষ্ট্যের সাথে সম্পর্কিত। 2em বর্তমান উপাদানটির 2 গুণ বড় ফন্ট-সাইজ নির্দেশ করে।
  • "Px" দেখার যন্ত্রের রেজোলিউশনের সাথে সম্পর্কিত।
  • "%" অন্য দৈর্ঘ্য ইউনিট মান আপেক্ষিক।
  • সমস্ত CSS দৈর্ঘ্যের ইউনিটগুলি সমস্ত প্রধান ব্রাউজার যেমন ক্রোম, ফায়ারফক্স, IE, সাফারি এবং অপেরা দ্বারা সমর্থিত।
  • "Em" দিয়ে গণনা করা মানগুলি মূল উপাদানটির সাথে সম্পর্কিত, তাই অপ্রত্যাশিত ফলাফল এড়াতে একাধিক উপাদান বাসা বাঁধার সময় এটি সাবধানে ব্যবহার করা হয়। সহজ উপায় হল "রিম" ব্যবহার করা যা মূল উপাদান আকারের উপর ভিত্তি করে।
  • সমস্ত CSS ইউনিট মান এবং ইউনিটের মধ্যে কোন স্থান ছাড়াই পরিমাপ করা হয়।
  • শূন্য (0) একটি দৈর্ঘ্য মান শনাক্তকারী প্রয়োজন হয় না। উদাহরণস্বরূপ, "মার্জিন = 0;" "মার্জিন = 0px;" নয়, সংজ্ঞায়িত করার সঠিক উপায়।

সম্পর্কিত: কিভাবে CSS দিয়ে পূর্ণ প্রস্থ লম্বা পৃষ্ঠা তৈরি করবেন?

রেকর্ডিং উত্স: www.webnots.com

এই ওয়েবসাইট আপনার অভিজ্ঞতা উন্নত করতে কুকি ব্যবহার করে। আমরা ধরে নেব যে আপনি এটির সাথে ঠিক আছেন, তবে আপনি ইচ্ছা করলে অপ্ট-আউট করতে পারেন। আমি স্বীকার করছি আরো বিস্তারিত