শতকরা মানের ব্যবহার করে ওয়েব ব্রাউজার কীভাবে প্রদর্শন করে তা জানুন
প্রতিক্রিয়াশীল ওয়েব ডিজাইনের অনেক ছাত্রের প্রস্থ মানের জন্য শতাংশ ব্যবহার করে একটি কঠিন সময় আছে। বিশেষ করে, ব্রাউজার যে শতাংশ গণনা করে কিভাবে বিভ্রান্তি আছে। নীচে একটি প্রতিক্রিয়াশীল ওয়েবসাইটের প্রস্থ গণনাগুলির জন্য কত শতাংশ কাজ করে তার বিস্তারিত ব্যাখ্যা পাবেন।
প্রস্থ মান জন্য পিক্সেল ব্যবহার করে
যখন আপনি প্রস্থ মান হিসাবে পিক্সেল ব্যবহার করেন, ফলাফলগুলি খুব সহজবোধ্য। যদি আপনি একটি ডকুমেন্টের শিরোলেখটিতে 100 পিক্সেল বিস্তৃত একটি উপাদান প্রস্থ মান নির্ধারণ করতে সিএসএস ব্যবহার করেন, তাহলে উপাদানটি একই আকারের হবে যা আপনি ওয়েবসাইটের বিষয়বস্তু বা পাদলেখ বা পাদলেখ বা অন্য কোন এলাকায় 100 পিক্সেল বিস্তৃত করবেন পাতা। পিক্সেল একটি পরম মান, তাই 100 পিক্সেল 100 পিক্সেল কোন ব্যাপার না যেখানে আপনার নথিতে একটি উপাদান প্রদর্শিত হয়। দুর্ভাগ্যবশত, যখন পিক্সেল মান বুঝতে সহজ, তারা প্রতিক্রিয়াশীল ওয়েবসাইটগুলিতে ভাল কাজ করে না।
এথান মারকোট শব্দটি "প্রতিক্রিয়াশীল ওয়েব ডিজাইন" গঠন করেছেন, এই পদ্ধতিটি ব্যাখ্যা করে 3 টি মূল প্রিন্সিপালকে ব্যাখ্যা করেছেন:
- একটি তরল গ্রিড
- তরল মিডিয়া
- মিডিয়া প্রশ্নের
যারা প্রথম দুটি পয়েন্ট, একটি তরল গ্রিড এবং তরল মিডিয়া, মান sizing জন্য শতাংশ, শতাংশ পিক্সেল ব্যবহার করে অর্জিত হয়।
প্রস্থ মান জন্য শতাংশ ব্যবহার করে
যখন আপনি উপাদানগুলির জন্য একটি প্রস্থের জন্য শতকরা শতাংশ ব্যবহার করেন, তখন যে উপাদানটি প্রদর্শিত হয় তার প্রকৃত আকার নথিতে কোথায় আছে তার উপর ভিত্তি করে পরিবর্তিত হবে। শতাংশগুলি একটি আপেক্ষিক মান, যার মানে আপনার আকারের অন্যান্য নথির মধ্যে আপেক্ষিক ফলাফল প্রদর্শিত হয়।
উদাহরণস্বরূপ, যদি আপনি একটি চিত্রের প্রস্থকে 50% -এ সেট করেন, তবে এর মানে এই নয় যে ছবিটি তার স্বাভাবিক আকারের অর্ধেক প্রদর্শিত হবে। এটি একটি সাধারণ ভুল ধারণা হয়।
যদি একটি ছবি নেটিভিটি 600 পিক্সেল ব্যবধানে থাকে, তাহলে এটি 50% এ প্রদর্শন করার জন্য একটি CSS মান ব্যবহার করে না মানে এটি ওয়েব ব্রাউজারে 300 পিক্সেল বিস্তৃত হবে। এই শতাংশ মান ইমেজ নিজেই মূল ইমেজ না, যে ইমেজ ধারণকারী উপাদান উপর ভিত্তি করে গণনা করা হয়। যদি ধারকটি (যা একটি বিভাগ বা অন্য কিছু এইচটিএমএল উপাদান হতে পারে) 1000 পিক্সেল চওড়া, তাহলে ইমেজটি 500 পিক্সেল এ প্রদর্শন করা হবে, যেহেতু এই মানটি 50% কন্টেইনারের প্রস্থের মধ্যে। যদি ধারণকারী উপাদানটি 400 পিক্সেল চওড়া হয়, তবে ইমেজটি শুধুমাত্র 200 পিক্সেলের মধ্যে প্রদর্শন করা হবে, যেহেতু এই মানটি 50% কন্টেইনারের। প্রশ্ন এখানে ইমেজ একটি 50% আকার আছে এটি উপাদান রয়েছে যা সম্পূর্ণভাবে নির্ভর করে।
মনে রাখবেন, প্রতিক্রিয়াশীল নকশা হল তরল। লেআউট এবং মাপ স্ক্রিন সাইজ / ডিভাইসের পরিবর্তন হিসাবে পরিবর্তন হবে । যদি আপনি এটি সম্পর্কে শারীরিক, অ-ওয়েব পদে মনে করেন, তবে এটি এমন একটি কার্ডবোর্ড বাক্সের মতো, যা আপনি প্যাকিং উপাদান সহ পূরণ করছেন। যদি আপনি বলে থাকেন যে বাক্সটি সেই উপাদান দিয়ে অর্ধেক ভরাট করা উচিত, তাহলে আপনার প্যাকিংয়ের পরিমাণ বাক্সের আকারের উপর নির্ভর করে পরিবর্তিত হবে। ওয়েব ডিজাইনে শতাংশ প্রস্থের জন্য একইটি সত্য।
অন্যান্য শতাংশ উপর ভিত্তি করে শতাংশ শতাংশ
ইমেজ / কন্টেইনার উদাহরণে, আমি উপস্থিত উপাদানটির জন্য পিক্সেল মানগুলি ব্যবহার করে দেখতে চাই যে প্রতিক্রিয়াশীল ইমেজ কিভাবে প্রদর্শন করবে। প্রকৃতপক্ষে, ধারণকারী উপাদানটিও শতাংশে নির্ধারিত হবে এবং চিত্রটি, অথবা অন্য উপাদানগুলি, যে ধারকের মধ্যে একটি শতাংশ শতাংশের উপর ভিত্তি করে তাদের মানগুলি পাবেন।
এখানে আরেকটি উদাহরণ যা অনুশীলন এই দেখায়।
বলুন আপনি একটি ওয়েবসাইট আছে যেখানে পুরো সাইটটি "কন্টেইনার" (একটি সাধারণ ওয়েব ডিজাইন অনুশীলন) একটি শ্রেণীর একটি বিভাগের মধ্যে রয়েছে। এই বিভাগে তিনটি বিভাগ আছে যা আপনি শেষ পর্যন্ত 3 উল্লম্ব কলাম হিসাবে প্রদর্শন করতে হবে। যে এইচটিএমএল এই মত চেহারা হতে পারে:
এখন, আপনি "কন্টেনার" বিভাগের 90% নম্বরের আকার নির্ধারণ করতে সিএসএস ব্যবহার করতে পারেন। এই উদাহরণে, ধারক বিভাগের অন্য একটি উপাদান নেই যা শরীরের চেয়ে অন্যটি ঘিরে রয়েছে, যা আমরা কোনও নির্দিষ্ট মানে সেট করা নেই। ডিফল্টভাবে, শরীরটি 100% ব্রাউজার উইন্ডোর হিসাবে রেন্ডার করবে। অতএব, "কন্টেনার" বিভাগের শতাংশ ব্রাউজার উইন্ডোর আকারের উপর ভিত্তি করে করা হবে। যে ব্রাউজার উইন্ডো আকার পরিবর্তন হিসাবে, তাই এই "ধারক" এর আকার হবে সুতরাং যদি ব্রাউজার উইন্ডো 2000 পিক্সেল বিস্তৃত হয়, এই বিভাগ 1800 পিক্সেল প্রদর্শন করা হবে। এটি 2000-এর 90-শতাংশ (2000 x .90 = 1800) হিসাবে গণনা করা হয়, যা ব্রাউজারের আকার।
যদি "কনটেইনার" মধ্যে পাওয়া "কল" বিভাগের প্রতিটিতে 30% আকারে সেট করা থাকে, তবে এই উদাহরণে তাদের প্রতিটি 540 পিক্সেল চওড়া হবে। এটি 1800 পিক্সেলের 30% হিসাবে গণনা করা হয় যা ধারকটি (1800 x .30 = 540) এ রেন্ডার করে। যদি আমরা সেই ধারার শতাংশ পরিবর্তিত করি, তবে এই অভ্যন্তরীণ বিভাগগুলি আকারে পরিবর্তিত হবে কারণ তারা নির্ভর করে উপাদানটিতে নির্ভরশীল।
আসুন ধরুন যে ব্রাউজার উইন্ডোগুলি ২000 পিক্সেল প্রশস্ত থাকে, কিন্তু আমরা 90% এর পরিবর্তে 80% এর পরিবর্তে 80% ধারকটির মান পরিবর্তন করি। এর মানে হল যে এটি এখন 1600 পিক্সেল বিস্তৃত হবে (2000 x .80 = 1600) এমনকি যদি আমরা 3 টি "কোল" বিভাগগুলির আকারের জন্য সিএসএস পরিবর্তন না করি, এবং 30% এ তাদের ছেড়ে দিই, তবে তারা তাদের ধারণকৃত উপাদান থেকে এখন ভিন্নভাবে উপস্থাপিত হবে, যা তাদের দ্বারা মাপের প্রেক্ষাপটে পরিবর্তিত হয়েছে, পরিবর্তিত হয়েছে। ঐ 3 বিভাগগুলি এখন 480 পিক্সেল বিস্তৃত হবে, যা 1600 এর 30%, অথবা ধারকটির আকার (1600 x .30 = 480)।
এই এমনকি আরো গ্রহণ করা হলে, এই "কল" বিভাগের মধ্যে একটি ছবি এবং একটি ইমেজ একটি শতাংশ ব্যবহার করে আকারের ছিল, তার আকারের জন্য প্রসঙ্গ "কল" নিজেই হবে। যেহেতু "কোল" বিভাগটি আকারের আকারে পরিবর্তিত হয়েছে, তাই এটির ভিতরে থাকা চিত্রটি হবে। তাই যদি ব্রাউজারের আকার বা "কন্টেইনার" পরিবর্তিত হয়, তবে এটি তিনটি "কোল" বিভাগকে প্রভাবিত করবে, যার ফলে "কোল" এর ভিতরে ইমেজটির আকার পরিবর্তন হবে। আপনি দেখতে পাচ্ছেন যে, এটি সবগুলি সংযুক্ত থাকলে এটি শতাংশে চালিত সাইজিং মানগুলির মধ্যে আসে
যখন আপনি বিবেচনা করবেন যে একটি ওয়েব পৃষ্ঠাটির ভিতরে একটি উপাদান যখন তার প্রস্থের জন্য শতাংশ মান ব্যবহার করা হয় তখন আপনাকে সেই পৃষ্ঠার মার্কআপের মধ্যে থাকা উপাদানটির প্রসঙ্গটি বুঝতে হবে।
সংক্ষেপে
প্রতিক্রিয়াশীল ওয়েবসাইটগুলির জন্য লেআউট তৈরি করার ক্ষেত্রে শতাংশগুলি গুরুত্বপূর্ণ ভূমিকা পালন করে। আপনি প্রতিক্রিয়াশীল ইমেজ সিজিং বা সত্য প্রবাহ গ্রিড তৈরি করতে শতাংশ প্রস্থ ব্যবহার করে থাকেন, যার আকারের একে অপরের সাথে সম্পর্কিত হয়, আপনি বুঝতে চান চেহারা অর্জন করার জন্য এই গণনা বুঝতে প্রয়োজন হবে।