আমি কিছু দুর্দান্ত historical তিহাসিক প্রসঙ্গ সরবরাহের জন্য জোশ 3736 এর উত্তরের প্রশংসা করতে চাই । যদিও এটি ভালভাবে বর্ণিত হয়েছে, এই প্রশ্নটি জিজ্ঞাসা করার পরে প্রায় পাঁচ বছরে CSS ল্যান্ডস্কেপ পরিবর্তিত হয়েছে। এই প্রশ্নটি যখন জিজ্ঞাসা করা px হয়েছিল , সঠিক উত্তর ছিল, কিন্তু আজকের এই সত্যটি আর রাখে না।
tl; dr: userem
ইউনিট ওভারভিউ
Icallyতিহাসিকভাবে pxইউনিটগুলি সাধারণত একটি ডিভাইস পিক্সেল উপস্থাপন করে। উচ্চতর এবং উচ্চতর পিক্সেল ঘনত্বযুক্ত ডিভাইসগুলির সাথে এটি আর অনেকগুলি ডিভাইসের জন্য ধারণ করে না, যেমন অ্যাপলের রেটিনা প্রদর্শন সহ।
remইউনিটগুলি r oot em আকারকে উপস্থাপন করে । এটি font-sizeযাই হোক না কেন ম্যাচ :root। এইচটিএমএলের ক্ষেত্রে এটি <html>উপাদান; এসভিজির জন্য, এটি <svg>উপাদান। font-sizeপ্রতিটি ব্রাউজারে ডিফল্ট হয় * 16px।
লেখার সময়, remপ্রায় 98% ব্যবহারকারী দ্বারা সমর্থিত । আপনার সম্পর্কে যে অন্যান্য 2% চিন্তিত থাকেন, তবে আমি তোমাদের মনে করিয়ে দেব যে মিডিয়া প্রশ্নের করছে এছাড়াও ব্যবহারকারীদের প্রায় 98% দ্বারা সমর্থিত ।
ব্যবহারের উপর px
ইন্টারনেটে বেশিরভাগ সিএসএস উদাহরণ pxমান ব্যবহার করে কারণ এগুলি ডি-ফ্যাক্টো স্ট্যান্ডার্ড। pt, inএবং অন্যান্য ইউনিট বিভিন্ন ক্ষেত্রে তত্ত্ব ব্যবহার করা যেতে পারে , তবে তারা ছোট মানগুলি ভালভাবে পরিচালনা করতে পারে না কারণ আপনাকে দ্রুত ভগ্নাংশগুলি অবলম্বন করতে হবে, যা টাইপ করতে দীর্ঘতর ছিল এবং এর পক্ষে যুক্তিযুক্ত হতে আরও শক্ত।
সঙ্গে আপনি একটি পাতলা সীমান্ত চেয়েছিলেন pxআপনি ব্যবহার করতে পারে 1px, সঙ্গে ptআপনি ব্যবহার করতে প্রয়োজন চাই 0.75ptসামঞ্জস্যপূর্ণ ফলাফলের জন্য, এবং যে শুধু খুব সুবিধাজনক নয়।
ব্যবহারের উপর rem
remএর ডিফল্ট মান 16pxএর ব্যবহারের জন্য খুব শক্ত যুক্তি নয়। লিখন 0.0625remহয় খারাপ লেখা চেয়ে 0.75pt, তাই কেন কেউ ব্যবহার করেন rem?
remঅন্যান্য ইউনিটগুলির থেকে লাভের জন্য দুটি অংশ রয়েছে ।
- ব্যবহারকারীর পছন্দগুলি সম্মানিত হয়
- আপনি যা চান তার আপাত
pxমান পরিবর্তন remকরতে পারেন
ব্যবহারকারী পছন্দসমূহ সম্মান
কয়েক বছর ধরে ব্রাউজার জুম অনেক পরিবর্তন হয়েছে। .তিহাসিকভাবে অনেক ব্রাউজার কেবল মাত্রা বাড়িয়ে তুলত font-size, কিন্তু ওয়েবসাইটগুলি যখন বুঝতে পেরেছিল যে তাদের সুন্দর পিক্সেল-নিখুঁত ডিজাইনগুলি যখন কেউ জুম বা আউট করেছে তখন যে কোনও সময় ভেঙে যাচ্ছে। এই মুহুর্তে, ব্রাউজারগুলি পুরো পৃষ্ঠাটি স্কেল করে, তাই ফন্ট-ভিত্তিক জুমিং চিত্রের বাইরে।
ব্যবহারকারীর ইচ্ছাকে সম্মান করা চিত্রের বাইরে নয়। কেবলমাত্র কোনও ব্রাউজার 16pxডিফল্ট হিসাবে সেট করা থাকে , তার অর্থ এই নয় যে কোনও ব্যবহারকারী তাদের পছন্দ পছন্দগুলি পরিবর্তন করতে 24pxবা 32pxস্বল্প দৃষ্টি বা দুর্বল দৃশ্যমানতার জন্য সংশোধন করতে পারবেন না (প্রাক্তন স্ক্রীন ঝলক)। যদি আপনি নিজের ইউনিটগুলি remঅবলম্বন করেন তবে উচ্চতর ফন্ট-আকারের যে কোনও ব্যবহারকারী আনুপাতিকভাবে বড় সাইট দেখতে পাবেন। সীমানা বড় হবে, প্যাডিং বড় হবে, মার্জিন বড় হবে, সবকিছু তরলভাবে মাপবে scale
আপনি যদি আপনার মিডিয়া প্রশ্নগুলিকে ভিত্তি করে থাকেন তবে আপনি remএটিও নিশ্চিত করতে পারেন যে আপনার ব্যবহারকারীরা যে সাইট দেখছেন সেগুলি তাদের স্ক্রিনের সাথে খাপ খায়। ব্যবহারকারীর সঙ্গে font-sizeসেট 32pxএকটি উপর 640pxব্যাপক ব্রাউজার, কার্যকরভাবে যেমন একজন ব্যবহারকারী দেখানো আপনার সাইটের দেখবে 16pxএকটি উপর 320pxব্যাপক ব্রাউজার। একেবারে ব্যবহারে RWD জন্য কোন ক্ষতি নেই rem।
আপাতত pxমান পরিবর্তন করা হচ্ছে
কারণ remউপর ভিত্তি করে তৈরি font-sizeএর :rootনোড, আপনি কি পরিবর্তন করতে চান তাহলে 1remপ্রতিনিধিত্ব করে, সব আপনাকে যা করতে হবে পরিবর্তন হয় font-size:
:root {
font-size: 100px;
}
body {
font-size: 1rem;
}
<p>Don't ever actually do this, please</p>
আপনি যা করেন না কেন, :rootউপাদানটির font-sizeকোনও pxমান নির্ধারণ করবেন না ।
আপনি সেট করেন তাহলে font-sizeউপর htmlএকটি থেকে pxমান, আপনি একটি উপায় তাদের ফিরে পেতে ছাড়া ব্যবহারকারীর পছন্দগুলি দূরে প্রস্ফুটিত গেছেন।
আপনি যদি আপাত মান পরিবর্তন করতে চান তবে ইউনিটগুলি remব্যবহার করুন %।
এর জন্য গণিতটি যুক্তিসঙ্গতভাবে সরাসরি-সামনের দিকে।
আপাত ফন্ট সাইজ :rootহয় 16px, কিন্তু বলতে আমরা এটি পরিবর্তন করতে চান করতে দেয় 20px। আমাদের যা করতে হবে তা হ'ল 16কিছু মান পেতে হবে 20।
আপনার সমীকরণ সেট আপ করুন:
16 * X = 20
এবং এর জন্য সমাধান করুন X:
X = 20 / 16
X = 1.25
X = 125%
:root {
font-size: 125%;
}
<p>If you're using the default font-size, I'm 20px tall.</p>
বহুগুণে 20সমস্ত কিছু করা এত দুর্দান্ত নয়, তবে একটি সাধারণ পরামর্শ হল আপাত আকারের remসমান করা 10px। এর জন্য যাদু নম্বরটি 10/16যা 0.625, বা 62.5%।
:root {
font-size: 62.5%;
}
<p>If you're using the default font-size, I'm 10px tall.</p>
এখন সমস্যাটি হচ্ছে আপনার font-sizeবাকী পৃষ্ঠাটির জন্য ডিফল্টটি খুব ছোট সেট করা হয়েছে তবে এর জন্য একটি সহজ ফিক্স রয়েছে: font-sizeএটি bodyব্যবহার করে সেট করুন rem:
:root {
font-size: 62.5%;
}
body {
font-size: 1.6rem;
}
<p>I'm the default font-size</p>
এটি লক্ষণীয় গুরুত্বপূর্ণ যে স্থানে এই সামঞ্জস্যের সাথে, আপাত মানটির অর্থ remহ'ল 10pxযার অর্থ আপনি যে কোনও মান লিখেছেন সেটি একটি দশমিক স্থানকে ধাক্কা দিয়ে pxসরাসরি রূপান্তর করতে পারে rem।
padding: 20px;
পরিণত হয়
padding: 2rem;
আপনার চয়ন করা আপাত ফন্ট-আকার আপনার উপর নির্ভর করে তাই আপনি যদি চান তবে কোনও কারণ নেই যা আপনি ব্যবহার করতে পারবেন না:
:root {
font-size: 6.25%;
}
body {
font-size: 16rem;
}
এবং 1remসমান আছে 1px।
সুতরাং আপনার কাছে এটি রয়েছে, আপনার সিএসএসকে অতিরিক্ত জটিলতা এড়াতে ব্যবহারকারীর শুভেচ্ছাকে সম্মান করার একটি সহজ সমাধান।
দাঁড়াও, তাহলে কী ধরা?
আমি ভীত ছিলাম যে আপনি এটি জিজ্ঞাসা করতে পারেন। আমি যতটা ভান করতে চাই remতা যাদু এবং সমস্ত কিছু সলভ করে, এখনও কিছু নোটের বিষয় রয়েছে। আমার মতে কিছু ভাঙ্গার বিষয় নয়, তবে আমি তাদের ফোন করব যাতে আপনি বলতে পারেন না যে আমি আপনাকে সতর্ক করেছিলাম না।
মিডিয়া ক্যোয়ারী (ব্যবহার em)
আপনি যে প্রথম সমস্যার সাথে চালাবেন তার মধ্যে একটিতে remমিডিয়া প্রশ্নগুলি জড়িত। নিম্নলিখিত কোড বিবেচনা করুন:
:root {
font-size: 1000px;
}
@media (min-width: 1rem) {
:root {
font-size: 1px;
}
}
এখানে remমিডিয়া-ক্যোয়ারী প্রযোজ্য কিনা এবং মিডিয়া ক্যোয়ারী এর মানের উপর নির্ভর করে পরিবর্তনের মান নির্ভর করে rem, তাই পৃথিবীতে কী চলছে?
remমিডিয়া ক্যোয়ারিগুলিতে প্রাথমিক মান ব্যবহার font-sizeএবং করা উচিত নয় (সাফারি অধ্যায় দেখুন) একাউন্টে কোনো পরিবর্তন যে ঘটে থাকতে পারে নিতে font-sizeএর :rootউপাদান। অন্য কথায়, এটির আপাত মান সর্বদা 16px ।
এটি কিছুটা বিরক্তিকর, কারণ এর অর্থ হল যে আপনাকে কিছু ভগ্নাংশ গণনা করতে হবে তবে আমি খুঁজে পেয়েছি যে সর্বাধিক সাধারণ মিডিয়া অনুসন্ধানগুলি ইতিমধ্যে 16 এর গুণাবলীযুক্ত মানগুলি ব্যবহার করে।
| px | rem |
+------+-----+
| 320 | 20 |
| 480 | 30 |
| 768 | 48 |
| 1024 | 64 |
| 1200 | 75 |
| 1600 | 100 |
অতিরিক্ত হিসাবে আপনি যদি সিএসএস প্রিপ্রোসেসর ব্যবহার করেন তবে আপনি আপনার মিডিয়া ক্যোয়ারী পরিচালনা করতে মিক্সিন বা ভেরিয়েবল ব্যবহার করতে পারেন, যা পুরোপুরি ইস্যুটি মাস্ক করবে।
আফ্রিকায় শিকার অভিযান
দুর্ভাগ্যক্রমে সাফারি সহ একটি পরিচিত বাগ রয়েছে যেখানে :rootফন্ট-আকারের পরিবর্তনগুলি remমিডিয়া ক্যোয়ারী রেঞ্জের জন্য গণনা করা মানগুলিকে পরিবর্তন করে । যদি :rootউপাদানটির ফন্ট-আকার কোনও মিডিয়া ক্যোয়ারির মধ্যে পরিবর্তিত হয় তবে এটি কিছু অদ্ভুত আচরণের কারণ হতে পারে । : সৌভাগ্যবশত ফিক্স সহজ ব্যবহার emমিডিয়া প্রশ্নের জন্য ইউনিট ।
প্রসঙ্গ স্যুইচিং
আপনি যদি বিভিন্ন বিভিন্ন প্রকল্পের মধ্যে স্যুইচ করেন তবে এটি সম্ভবত সম্ভব যে আপাতর ফন্ট-আকারের remবিভিন্ন মান থাকবে। একটি প্রকল্পে, আপনি সম্ভবত 10pxঅন্য কোন প্রকল্পে যেখানে আপাত আকার হতে পারেন তার একটি আপাত আকার ব্যবহার করছেন 1px। এটি বিভ্রান্তিকর হতে পারে এবং সমস্যার কারণ হতে পারে।
এখানে আমার একমাত্র সুপারিশটি হ'ল একটি আপাত আকারে 62.5%রূপান্তরিত remহওয়ার জন্য লেগে থাকা 10px, কারণ এটি আমার অভিজ্ঞতাতে বেশি সাধারণ।
সিএসএস লাইব্রেরি ভাগ করা হয়েছে
আপনি যদি এমন কোনও সাইট ব্যবহার করেন যা আপনি নিয়ন্ত্রণ করেন না এমন কোনও সিএসএস লিখছেন যেমন এমবেডেড উইজেটের জন্য, আপাত আকারের কী remহবে তা জানার সত্যিই ভাল উপায় নেই । যদি এটি হয় তবে অবিরতভাবে ব্যবহার চালিয়ে যান px।
আপনি যদি এখনও ব্যবহার করতে চান remতবে এর আকারের আকারের জন্য স্কেলিংকে ওভাররাইড করার জন্য একটি পরিবর্তনশীল সহ স্টাইলশিটের স্যাস বা LSS সংস্করণ প্রকাশের বিষয়টি বিবেচনা করুন rem।
* আমি কাউকে ব্যবহার থেকে দূরে রাখতে চাই না rem, তবে প্রতিটি ব্রাউজার 16pxডিফল্টরূপে ব্যবহার করে তা আমি আনুষ্ঠানিকভাবে নিশ্চিত করতে সক্ষম হইনি । আপনি দেখুন, প্রচুর ব্রাউজার রয়েছে এবং একটি ব্রাউজারের পক্ষে এতটুকু বলা, বলা 15pxবা বলা যায় এমন কিছু এতদূর মুছে ফেলা উচিত নয় 18px। পরীক্ষায়, তবে আমি এমন একটি উদাহরণও দেখিনি যেখানে ডিফল্ট সেটিংস ব্যবহার করে কোনও ব্রাউজারের ডিফল্ট সেটিংস ব্যবহার করে অন্য কোনও মান থাকে 16px। যদি আপনি এরকম উদাহরণ পান তবে দয়া করে এটি আমার সাথে ভাগ করুন।
