মূল উপাদানের ফন্টের আকার, প্যারেন্ট উপাদানের ফন্টের আকার ও DPI দিয়ে px-কে rem, em, pt, পাইকা, ইঞ্চি ও mm-এ রূপান্তর করুন। CSS-এ 1 in = 96 px = 72 pt নির্ধারিত।
লেখক: AdminAI লেখার টুল দিয়ে খসড়া করাহালনাগাদ যাচাই করা উদাহরণ: ৭
মূল ফন্টের মাপ 16 px এবং প্রতি ইঞ্চিতে 96 পিক্সেল হলে 24px মানে 1.5rem।
| একক | মান | সংজ্ঞা |
|---|---|---|
| পিক্সেল (px) | 24px | 1 px |
| পয়েন্ট (pt) | 18pt | 1 pt = 1/72 in |
| পাইকা (pc) | 1.5pc | 1 pc = 12 pt = 1/6 in |
| ইঞ্চি (in) | 0.25in | 1 in = DPI px |
| সেন্টিমিটার (cm) | 0.635cm | 1 cm = 1/2.54 in |
| মিলিমিটার (mm) | 6.35mm | 1 mm = 1/25.4 in |
| সিকি মিলিমিটার (Q) | 25.4Q | 1 Q = 0.25 mm |
| em (অভিভাবক এলিমেন্টের ফন্টের মাপ) | 1.5em | 1 em = parent font size |
| rem (মূল এলিমেন্টের ফন্টের মাপ) | 1.5rem | 1 rem = root font size |
| অভিভাবক ফন্টের মাপের শতাংশ (%) | 150% | 100% = parent font size |
1 px
1 rem = root font size
CSS সব দৈর্ঘ্য পিক্সেলের মাধ্যমে রূপান্তর করে। নিরপেক্ষ এককগুলির অনুপাত নির্দিষ্ট: 1 in = 2.54 cm = 96 px = 72 pt = 6 pc; 1 Q এক মিলিমিটারের এক-চতুর্থাংশ। ফন্টনির্ভর একক পেজের ওপর নির্ভর করে: 1 rem মূল উপাদানের ফন্টের মাপ; font-size দেওয়ার সময় 1 em (বা 100%) মূলধারক উপাদানের ফন্টের মাপ। মান পিক্সেলে বদলে লক্ষ্য এককে পিক্সেল সংখ্যা দিয়ে ভাগ করা হয়।
পাঠকের ব্রাউজারের ফন্টের পছন্দ মানতে ওয়েব নির্মাতারা ডিজাইনের পিক্সেল মাপ rem এ বদলান: মূল মাপ 16 px হলে 24 px মানে 1.5 rem। মুদ্রণের জন্য প্রতি ইঞ্চিতে পিক্সেলের ঘর ব্যবহার করুন; 300 DPI তে 10 mm লোগোর জন্য প্রায় 118 পিক্সেল লাগে। পাঠ্য ব্রাউজারের পছন্দ মানতে হলে মূল ফন্টের মাপেও সেই পছন্দ মানতে হবে।
CSS ইঞ্চি পর্দায় স্কেলের ইঞ্চি নাও হতে পারে। CSS ইঞ্চিপ্রতি 96 px নির্ধারণ করে; রেফারেন্স পিক্সেলের দর্শনকোণ প্রায় 0.0213°। বাস্তবায়ন ভৌত মাপ বা পিক্সেলভিত্তিক হতে পারে; যন্ত্রের ম্যাপিং, দেখার দূরত্ব ও মুদ্রণের স্কেল বাস্তব মাপে প্রভাব ফেলে।
সূত্রে xₛ ও xₜ মূল ও লক্ষ্য মান; pₛ ও pₜ মূল ও লক্ষ্য এককপ্রতি পিক্সেলের সংখ্যা। এই গুণক আপনার দেওয়া ফন্টের মাপ ও পিক্সেল ঘনত্ব ব্যবহার করে।
rem মূল উপাদানের ফন্টের মাপের ওপর নির্ভর করে। নিচের উদাহরণে সেই মাপ স্পষ্ট করা আছে। em ও শতাংশের জন্য এই ফর্মে দেওয়া প্যারেন্ট ফন্টের মাপ ব্যবহৃত হয়; প্রকৃত CSS-এ কোন প্রপার্টি তা অনুযায়ী ভিত্তি বদলায়।
rem = px ÷ root(px)
24 px ÷ 16 px = 1.5 rem
font-size-এর em প্যারেন্টের ওপর, অন্য প্রপার্টির em উপাদানের নিজের ফন্টের ওপর নির্ভর করে। অন্য শতাংশের ভিত্তি প্রস্থও হতে পারে। আলাদা pixels/in মান এখানে ছবি বা প্রিন্টের হিসাবের জন্য; তা CSS-এর স্থির এককসংজ্ঞা বদলায় না।
| মান | মূল একক | লক্ষ্য একক | প্রসঙ্গ | রূপান্তরিত মান |
|---|---|---|---|---|
| 24 | px | rem | মূল ফন্ট 16 px | 1.5 |
| 24 | px | rem | মূল ফন্ট 20 px | 1.2 |
| 12 | pt | px | 96 পিক্সেল/in | 16 |
| 1 | pc | pt | 96 পিক্সেল/in | 12 |
| 100 | % | em | প্যারেন্ট ফন্ট 16 px | 1 |
| 10 | mm | px | 300 পিক্সেল/in | 118.110236 |
CSS px সবসময় পর্দার একটি ভৌত পিক্সেল নয়। সারণির প্রসঙ্গ প্রতিটি হিসাবের অংশ। মিলিমিটারের সারি গোল করা; ওয়েবের জন্য প্রকৃত ফন্টের ভিত্তি ও প্রিন্টের জন্য কাঙ্ক্ষিত রেজোলিউশন ব্যবহার করুন।
ভিত্তি: W3C CSS Values and Units.
যাচাইয়ের উৎস: উদাহরণ যাচাই: CSS Values 3 §6.1: 1rem = মূল এলিমেন্টের ফন্টের মাপ (16 px এখানে ধরা ব্রাউজারের পূর্বনির্ধারিত মান); 24 / 16 = 1.5
যাচাইয়ের উৎস: উদাহরণ যাচাই: CSS Values 3 §6.2: 1pt = 1/72 in, 1in = 96px; 12 × 96/72 = 16
যাচাইয়ের উৎস: উদাহরণ যাচাই: CSS Values 3 §6.2: 1in = 96px
যাচাইয়ের উৎস: উদাহরণ যাচাই: 1 rem = মূল এলিমেন্টের ফন্টের মাপ (16 px); 1.5 × 16
সাধারণ প্রাথমিক মাপ 16 পিক্সেল। এক rem মূল html উপাদানের ফন্টের মাপের সমান। পাঠক প্রাথমিক মাপ না বদলালে বা স্টাইলশিটে html { font-size } না থাকলে প্রধান ব্রাউজারগুলি 16 px ব্যবহার করে। ওই প্রাথমিক মাপে html { font-size: 62.5% } দিলে 1 rem = 10 px হয়। W3C CSS Values and Units rem নির্ধারণ করে; 16 px ব্রাউজারের প্রাথমিক পছন্দ, নির্দিষ্টকরণের অংশ নয়।
পিক্সেলকে 0.75 দিয়ে গুণ করুন; পয়েন্ট থেকে পিক্সেলে 4/3 (প্রায় 1.333) দিয়ে গুণ করুন। দুই গুণকই W3C CSS নিয়ম 1 in = 96 px = 72 pt থেকে আসে, তাই 1 px = 72/96 pt। 16 px লেখা 12 pt; ওয়ার্ড প্রসেসরের 11 pt লেখা প্রায় 14.67 px।
rem সবসময় মূল উপাদানের ফন্টের মাপ ধরে; em বর্তমান উপাদানকে, বা font-size এ ব্যবহৃত হলে ধারককে ধরে। তাই ভেতরে ভেতরে em গুণিত হয়: 1.2em তালিকার ভেতর আরেক 1.2em তালিকার লেখা বাইরের প্রাথমিক মাপের 1.44 গুণ। মূল মাপ 16 px হলে যত ভেতরেই থাকুক 1.2rem থাকে 19.2 px।
পাঠ্য যেন পাঠকের ব্রাউজারের ফন্টের পছন্দ মানে, সে জন্য rem ব্যবহার করুন। পেজ জুম px ও rem দুটিই বড় করে; প্রাথমিক ফন্টের পছন্দ শুধু rem, em ও শতাংশের মাপ বদলায়। WCAG 2.1 সাফল্যের শর্ত 1.4.4 (স্তর AA) অনুযায়ী লেখা বিষয় বা কার্যকারিতা না হারিয়ে 200% পর্যন্ত বড় করা যেতে হবে। px দিয়েও ব্রাউজার জুমে তা সম্ভব; rem ফন্টের পছন্দও মানে। rem, em ও শতাংশের প্রভাব মূল বা ধারক উপাদানের প্রসঙ্গে নির্ভর করে; মূল মাপে পাঠকের পছন্দ মানতে হবে।
CSS ইঞ্চি পর্দায় মাপা ইঞ্চির চেয়ে ভিন্ন হতে পারে। CSS এ 1 in ঠিক 96 px; W3C রেফারেন্স পিক্সেল 28 in দূর থেকে দেখা 96 DPI পর্দার পিক্সেল, প্রায় 0.0213° দর্শনকোণ। যন্ত্রের ম্যাপিং ও দূরত্ব বদলায় বলে ফোনে 96 px বাক্স ভৌত ইঞ্চির চেয়ে ছোট হতে পারে। প্রকৃত মাপের মুদ্রণে 1 in = 25.4 mm স্কেলের সঙ্গে মিলতে পারে; মুদ্রণস্কেল ও ক্যালিব্রেশনও প্রভাব ফেলে।
এই ক্যালকুলেটরে স্বাধীন উৎস থেকে উত্তর নেওয়া ৭টি সমাধান করা উদাহরণ রয়েছে। এগুলি পরীক্ষার সমষ্টিতে চালানো হয়, আর আপনি এখানেও চালাতে পারেন।