সব টুল বিনামূল্যে

প্রতিটি CSS ইউনিট ব্রাউজ করুন — absolute (px, cm, pt), font-relative (em, rem, ch), viewport (vw, dvh), container-query, grid (fr), angle, time ও resolution — একটি অনুসন্ধানযোগ্য, টাইপ-ফিল্টারযোগ্য রেফারেন্সে বিবরণ, একটি "কখন ব্যবহার করবেন" নোট এবং কপি-প্রস্তুত টোকেন সহ। আপনার ব্রাউজারে, বিনামূল্যে।

প্রতিটি CSS ইউনিট, ব্যাখ্যা সহ। সবকিছু একটি বিল্ট-ইন রেফারেন্স থেকে আপনার ব্রাউজারে চলে — কিছুই সার্ভারে পাঠানো হয় না।

আপনার অনুসন্ধানের সাথে কোনো ইউনিট মিলছে না।
ভিন্ন একটি ইউনিট বা ক্যাটাগরি চেষ্টা করুন — যেমন rem, dvh, fr বা angle।

CSS Units Reference সম্পর্কে

CSS ইউনিট রেফারেন্স ভাষাটির প্রদত্ত প্রতিটি ইউনিট — মোট 45টি — টাইপ অনুযায়ী সাজিয়ে নথিভুক্ত করে: px, cm ও pt-এর মতো অ্যাবসোলিউট ইউনিট; em, rem, ch ও lh-এর মতো ফন্ট-রিলেটিভ ইউনিট; vw ও vh থেকে নতুন svh, lvh ও dvh পর্যন্ত ভিউপোর্ট ইউনিট; cqw ও cqi-এর মতো কন্টেইনার-কোয়েরি ইউনিট; গ্রিড fr ইউনিট; সাথে অ্যাঙ্গেল, টাইম, রেজোলিউশন ও পার্সেন্টেজ।

প্রতিটি কার্ড শুধু একটি সংজ্ঞার চেয়ে বেশি কিছু দেয়: কপিযোগ্য মনোস্পেসে ইউনিট টোকেন, এর পূর্ণ নাম, এর ক্যাটাগরি, এটি কীভাবে গণনা করা হয় তার সহজ-ভাষার বর্ণনা, এবং একটি ব্যবহারিক "কখন ব্যবহার করবেন" নোট, যা বলে দেয় ইউনিটটি কোথায় কার্যকর — এবং কোথায় ভিন্ন কোনো ইউনিট বেশি ভালো কাজ করে।

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

CSS Units Reference কীভাবে ব্যবহার করবেন

  1. টোকেন, নাম বা অর্থ দিয়ে একটি ইউনিট খুঁজুন — যেমন rem, viewport width বা angle।
  2. গ্রিডটিকে অ্যাবসোলিউট, ফন্ট-রিলেটিভ, ভিউপোর্ট, কন্টেইনার, গ্রিড, অ্যাঙ্গেল, টাইম, রেজোলিউশন বা পার্সেন্টেজ ইউনিটে ফিল্টার করতে টাইপ চিপ ব্যবহার করুন।
  3. সঠিকটি বেছে নিতে প্রতিটি ইউনিটের বর্ণনা ও "কখন ব্যবহার করবেন" নোট পড়ুন।
  4. আপনার স্টাইলশিটের জন্য ইউনিট টোকেন নিতে কপি বোতাম চাপুন।

সচরাচর জিজ্ঞাসিত প্রশ্ন

ফন্ট সাইজ এবং যা কিছু ব্যবহারকারীর পছন্দের টেক্সট সাইজ অনুযায়ী স্কেল হওয়া উচিত তার জন্য rem ব্যবহার করুন — rem রুট ফন্ট সাইজ অনুসরণ করে, তাই ব্রাউজারের অ্যাক্সেসিবিলিটি সেটিংস কার্যকর হয়। হেয়ারলাইন বর্ডারের মতো যা অপটিক্যালি স্থির থাকা উচিত তার জন্য px ব্যবহার করুন।

em বর্তমান এলিমেন্টের নিজস্ব ফন্ট সাইজের সাপেক্ষে হয়, তাই নেস্টেড এলিমেন্টে মান জমতে থাকে; rem সবসময় রুট এলিমেন্টের সাপেক্ষে হয়, যা নির্ভরযোগ্য ফলাফল দেয়। তাই স্পেসিং ও টাইপ স্কেলের জন্য rem ডিফল্ট পছন্দ হয়ে উঠেছে।

মোবাইল ব্রাউজারগুলো তাদের টুলবার দেখায় ও লুকায়, যা দৃশ্যমান উচ্চতা বদলে দেয়, অথচ vh বড় লেআউট আকারে স্থির থাকে। ডাইনামিক ইউনিট dvh টুলবার সরার সাথে সাথে প্রকৃত দৃশ্যমান উচ্চতা অনুসরণ করে, আর svh/lvh সবচেয়ে ছোট ও বড় অবস্থায় আটকে থাকে।

fr একটি গ্রিড কন্টেইনারের ফাঁকা জায়গা ভগ্নাংশ অনুযায়ী বণ্টন করে: grid-template-columns: 2fr 1fr প্রথম কলামকে দ্বিতীয়টির বাকি প্রস্থের দ্বিগুণ দেয়, ফিক্সড ট্র্যাক ও গ্যাপ বাদ দেওয়ার পর। এটি শুধু গ্রিড ট্র্যাক সংজ্ঞার মধ্যেই বিদ্যমান।

এগুলো ভিউপোর্টের বদলে নিকটতম কোয়েরি কন্টেইনারের সাপেক্ষে এলিমেন্টের আকার নির্ধারণ করে: cqw হলো কন্টেইনারের প্রস্থের 1%, cqi হলো এর ইনলাইন সাইজের 1%। এগুলো স্ক্রিনের আকার নির্বিশেষে একটি কম্পোনেন্টকে সেটি যে বক্সে থাকে তার সাথে স্কেল করতে দেয়।

হ্যাঁ। সবগুলো 45টি ইউনিটই বিনামূল্যে নথিভুক্ত করা আছে এমন একটি পেজে যা সম্পূর্ণভাবে আপনার ব্রাউজারে চলে — কোনো সাইন-আপ নেই, সার্ভারে কোনো রিকোয়েস্ট নেই।

শেয়ার করুন
সাহায্য দরকার?
এই টুলে কোনো সমস্যা পেয়েছেন? আমাদের দলকে জানান।
সমস্যা রিপোর্ট করুন

আপনার নিজের ওয়েবসাইটে এই বিনামূল্যের টুলটি যোগ করুন — নিচের কোডটি কপি করে পেস্ট করুন।