তবে কনটেইনারটি ভিউপোর্ট (বডি) না হলে কী হবে?
এই প্রশ্নটি গৃহীত উত্তরের অধীনে অ্যালেক্সের একটি মন্তব্যে জিজ্ঞাসা করা হয়েছে ।
এই সত্যটির অর্থ এই নয় যে সেই ধারকটির vwআকারের কিছুটা পরিমাণ ব্যবহার করা যাবে না। এখন মোটামুটি যে কোনও প্রকারের পরিবর্তন দেখতে পেয়ে ধরে নিতে হবে যে কোনওভাবে ধারক আকারে নমনীয়। প্রত্যক্ষ শতাংশের widthমাধ্যমে বা 100% বিয়োগের মার্জিনের মধ্য দিয়ে হোক । বিন্দুটি "মুট" হয়ে যায় যদি ধারকটি সর্বদা সেট থাকে তবে চলুন, 200pxপ্রশস্তভাবে বলা যাক - তবে কেবলমাত্র একটি font-sizeপ্রস্থ সেট করুন যা সেই প্রস্থের জন্য কাজ করে।
উদাহরণ 1
নমনীয় প্রস্থের ধারক সহ, তবে এটি অবশ্যই বুঝতে হবে যে কোনওভাবে ধারকটি ভিউপোর্টের বাইরে এখনও আকারের হয়ে উঠছে । যেমনটি vwভিউপোর্টের শতাংশের আকারের পার্থক্যের ভিত্তিতে একটি সেটিংস সামঞ্জস্য করার বিষয় , যার অর্থ পিতামাতার মোড়কের আকারের বিষয়টি বিবেচনায় নেওয়া। এই উদাহরণটি ধরুন :
div {
width: 50%;
border: 1px solid black;
margin: 20px;
font-size: 16px;
/* 100 = viewport width, as 1vw = 1/100th of that
So if the container is 50% of viewport (as here)
then factor that into how you want it to size.
Let's say you like 5vw if it were the whole width,
then for this container, size it at 2.5vw (5 * .5 [i.e. 50%])
*/
font-size: 2.5vw;
}
এখানে ধরে নেওয়া যে divএটি একটি সন্তানের body, এটি 50%সেই 100%প্রস্থের, যা এই বেসিক ক্ষেত্রে ভিউপোর্টের আকার। মূলত, আপনি একটি সেট করতে চান যা আপনাকে vwভাল দেখাচ্ছে। আপনি উপরের সিএসএস বিষয়বস্তুতে আমার মন্তব্য দেখতে পারেন, আপনি যে গাণিতিকভাবে মাধ্যমে "মনে হয়" করতে পারেন সম্পূর্ণ ভিউপোর্ট আকার থেকে সম্মান সঙ্গে, কিন্তু আপনি না প্রয়োজন যে কাজ করতে। পাঠ্যটি ধারকটির সাথে "ফ্লেক্স" করতে চলেছে কারণ ভিউপোর্টের পুনরায় আকার দেওয়ার সাথে ধারক নমনীয়। আপডেট: এখানে দুটি ভিন্ন আকারের পাত্রে উদাহরণ রয়েছে ।
উদাহরণ 2
আপনি এর ভিত্তিতে গণনা জোর করে ভিউপোর্ট সাইজিং নিশ্চিত করতে সহায়তা করতে পারেন। এই উদাহরণ বিবেচনা করুন :
html {width: 100%;} /* Force 'html' to be viewport width */
body {width: 150%; } /* Overflow the body */
div {
width: 50%;
border: 1px solid black;
margin: 20px;
font-size: 16px;
/* 100 = viewport width, as 1vw = 1/100th of that
Here, the body is 150% of viewport, but the container is 50%
of viewport, so both parents factor into how you want it to size.
Let's say you like 5vw if it were the whole width,
then for this container, size it at 3.75vw
(5 * 1.5 [i.e. 150%]) * .5 [i.e. 50%]
*/
font-size: 3.75vw;
}
সাইজিংটি এখনও ভিউপোর্টের উপর ভিত্তি করে রয়েছে তবে এটি কন্টেইনার আকারের ভিত্তিতেই সেট আপ করা হয়েছে।
ধারক আকারের পরিবর্তনশীল পরিবর্তন হওয়া উচিত ...
যদি ধারক উপাদানটির আকার নির্ধারণের @mediaকাজটি ব্রেকপয়েন্টগুলির মাধ্যমে বা জাভাস্ক্রিপ্টের মাধ্যমে গতিশীলভাবে তার শতাংশের সম্পর্কের পরিবর্তন ঘটায় , তবে বেস "টার্গেট" যাই হোক না কেন পাঠ্য আকারের জন্য একই "সম্পর্ক" বজায় রাখার জন্য পুনঃব্যবহারের প্রয়োজন হবে।
উপরে # 1 উদাহরণ নিন। যদি উভয় বা জাভাস্ক্রিপ্ট দ্বারা প্রস্থে divপরিবর্তন করা 25%হয় @media, তবে একই সময়ে, font-sizeমিডিয়া ক্যোয়ারিতে বা জাভাস্ক্রিপ্ট দ্বারা নতুন ক্যালকুলেশনে সামঞ্জস্য করতে হবে 5vw * .25 = 1.25। এটি পাঠ্য আকারকে একই আকারে 50%রাখত যদি ভিউপোর্ট সাইজিং থেকে মূল ধারকটির "প্রস্থ" অর্ধেক কমে হত তবে এটি এখন তার নিজস্ব শতাংশের গণনার পরিবর্তনের কারণে হ্রাস পেয়েছে।
একটি চ্যালেঞ্জ
সঙ্গে সিএসএস 3 calc()ফাংশন ব্যবহার, এটা পরিবর্তনশীল সমন্বয়, যেমন যে ফাংশন জন্য কাজ করে না কঠিন হয়ে যাবে font-sizeএই সময়ে উদ্দেশ্যে। সুতরাং আপনার প্রস্থটি যদি চালু থাকে তবে আপনি খাঁটি সিএসএস 3 সমন্বয় করতে পারেন নি calc()। অবশ্যই, মার্জিনগুলির জন্য প্রস্থের একটি সামান্য সামঞ্জস্য কোনও পরিবর্তনের পরোয়ানা হিসাবে যথেষ্ট নাও হতে পারে font-size, তাই এটি কোনও ব্যাপার নয়।
font-size: 100%;মানে পাঠ্যটি 100% আকারের হত (যেমন এটি তার পিতামাতার কাছ থেকে উত্তরাধিকার সূত্রে প্রাপ্ত)। ডিফল্টরূপে এটি 16px। সুতরাং আপনি যদি 50% ব্যবহার করেন তবে এটি হরফ আকার হবে: 8px