এখানে সিএসএস 3 পরিমাপের একক দুটি দম্পতি রয়েছে:
ভিউপোর্ট-শতাংশের দৈর্ঘ্য কী?
উপরে লিঙ্কযুক্ত ডাব্লু 3 প্রার্থীর সুপারিশ থেকে:
ভিউপোর্ট-শতাংশের দৈর্ঘ্য প্রাথমিকযুক্ত ব্লকটির আকারের সাথে সম্পর্কিত। প্রাথমিক ধারণকারী ব্লকের উচ্চতা বা প্রস্থ পরিবর্তন করা হয়, সেগুলি সেই অনুযায়ী মাপা হয়।
এই ইউনিটগুলি vh
(ভিউপোর্টের উচ্চতা), vw
(ভিউপোর্টের প্রস্থ), vmin
(ভিউপোর্টের সর্বনিম্ন দৈর্ঘ্য) এবং vmax
(ভিউপোর্ট সর্বাধিক দৈর্ঘ্য)।
কীভাবে এটি ব্রাউজারের উচ্চতা পূরণ করতে একটি ডিভাইডার তৈরি করতে ব্যবহার করা যেতে পারে?
এই প্রশ্নের জন্য আমরা ব্যবহার করতে পারি vh
: 1vh
ভিউপোর্টের উচ্চতার 1% এর সমান। এটি বলতে 100vh
গেলে, ডিওএম গাছের যে উপাদানটি রয়েছে তা নির্বিশেষে ব্রাউজার উইন্ডোটির উচ্চতার সমান:
এইচটিএমএল
<div></div>
সিএসএস
div {
height: 100vh;
}
এটি আক্ষরিক প্রয়োজন যা প্রয়োজন। এখানে এটি ব্যবহারের একটি জেএসফিডাল উদাহরণ ।
ব্রাউজারগুলি এই নতুন ইউনিটগুলিকে সমর্থন করে?
এটি বর্তমানে অপেরা মিনি বাদে সমস্ত আপ টু ডেট প্রধান ব্রাউজারগুলিতে সমর্থিত। পরীক্ষা করে দেখুন আমি ব্যবহার করতে পারেন ... আরো সমর্থনের জন্য।
একাধিক কলাম সহ এটি কীভাবে ব্যবহার করা যেতে পারে?
বাম এবং ডান বিভাজক সমন্বিত হাতে প্রশ্ন ক্ষেত্রে, এখানে একটি হল JSFiddle উদাহরণ উভয় জড়িত দুই কলাম বিন্যাস দেখাচ্ছে vh
এবং vw
।
কিভাবে 100vh
আলাদা 100%
?
উদাহরণস্বরূপ এই বিন্যাসটি নিন:
<body style="height:100%">
<div style="height:200px">
<p style="height:100%; display:block;">Hello, world!</p>
</div>
</body>
এখানে p
ট্যাগটি 100% উচ্চতায় সেট করা আছে তবে div
এটিতে 200 পিক্সেল উচ্চতা রয়েছে বলে 200 পিক্সেলের 100% 200 পিক্সেল হয়ে যায়, উচ্চতার 100% নয়body
। ব্যবহার 100vh
পরিবর্তে এর মানে হল যে p
ট্যাগের 100% উচ্চতা হতে হবে body
নির্বিশেষে div
উচ্চতা। পার্থক্যটি দেখতে সহজেই এই জেএসফিডেলের সাথে একবার দেখুন!