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