বাড়িয়ে নিন আপনার মনিটরের সাইজ এক নিমিষেই

বাড়িয়ে নিন আপনার মনিটরের সাইজ এক নিমিষেই
BDLANCE E-LEARNING - স্বপ্ন দেখো, স্বপ্ন দেখাও·MONDAY, FEBRUARY 8, 2016
8 February, 2016
আমার আজকের টিউটোরিয়ালের বিষয়বস্তু হচ্ছে “মেদ-ভুড়ি কি করি !!” কিংবা “টাক মাথায় চুল গজান এক তুড়িতেই” এই টাইপের । ওয়েব ডিজাইনারদের এক তরল সমস্যার কঠিন সমাধান দেয়ার জন্যই আমার আজকের আয়োজন ।
.
শুরুতেই সমস্যা….
ধরি,
আমার হাতে আছে একটি PSD টেমপ্লেট যার কনটেইনারের width (প্রশস্ততা) 1170px ।
কিন্তু আত্মঘাতি বিষয় হচ্ছে,
আমার কমপিউটারের মনিটরের রেজ্যালূশন (resolution) হলো 1152*900 ।
(লক্ষ্য করুন, এখানে প্রথমটা (1152) হলো width আর দ্বিতীয়টা হলো height (উচ্চতা) । height এর বিষয়টা মাথা থেকে একদম সরিয়ে ফেলুন । আমার পরবর্তী আলোচনা শুধুমাত্র width নিয়ে । এবং অবশ্যই PSD-র কনটেইনারের width নিয়ে কথা বলবো, এরিয়ার width নিয়ে নয় ।)
.
যা’হোক, এখানে দেখার বিষয় হলো, আমাদের মনিটরের width (1152px) থেকে PSD–র কনটেইনারের width (1170px) বেশি । এখন আমরা যদি ব্রাউজারের জুম 100% রেখে এই PSD-টিকে HTML এ রূপান্তর করি তাহলে কি পিক্সেল পারফেক্ট হবে ?  না !! কোনভাবেই হবে না  । কেননা আমাদের মনিটর বড় জোর 960px/970px কনটেইনারের জন্য পিক্সেল পারফেক্ট, 1170px এর জন্য নয় । 1170px এ এলিমেন্টগুলো পরস্পর থেকে যে দূরত্বে অবস্থিত মানে এদের মাঝে যে মার্জিন/প্যাডিং আছে সেগুলোর পরিমাপ আমাদের মনিটরে কোনোভাবেই সমান হবে না । পিএসডি থেকে সমান মাপ নিয়ে HTML টেমপ্লেইটে দিয়ে সেটাকে Lightshot দিয়ে মেপে দেখবেন –এলিমেন্টগুলোর পারস্পরিক দূরত্ব/width ইত্যাদি পিএসডি-র সমান হবে না । এটা একটা ভালো সমস্যা । কারণ একটাই-- পিএসডি-র চাইতে মনিটরের width কম । এর সমাধান আমি কয়েকভাবেই করে দেখেছি । প্রত্যেকটাতেই কোন না কোন অসুবিধা থেকেই যায় । অনেক পরীক্ষার পর আমি একটি কার্যকর এবং অসুবিধা-মুক্ত সমাধানে আসতে পেরেছি । সেটাই এখানে সবিস্তারে বর্ণনা করছি ।

এবার আসুন সমাধানে…
সহজ সমাধান, একটি বড় মনিটর কিনে নিন । কিন্তু ভাইয়া একটু দাঁড়ান । অস্থির হবেন না । মনিটর কেনার জন্য দৌঁড়-ঝাপ লাগাবেন না । ঠান্ডা মাথায় পরের লেখাটুকু পড়ুন । নতুন মনিটর না কিনে পুরানো মনিটরের সাইজ বাড়ানোর জন্যই তো এত কাহিনী … ।
.
বুটস্ট্রাপের জন্য সমাধান:
===================
মজিলা ফায়ার ফক্সের (v43.0.4) জুম রাখুন 100% । এবার উপরে ডান কোণায় একেবারে শেষ বাটনে(open menu) ক্লিক করুন । তারপর নিচে Developer > Responsive Design View ক্লিক করলে যে উইনডো আসবে সেটার উপরে বাম কোণায় 768*1024 বা এ জাতীয় সংখ্যা লেখা দেখতে পাবেন । সেটাতে ক্লিক করলে একটা তালিকা বের হবে । বলা বাহুল্য প্রথম সংখ্যাটি হচ্ছে স্ক্রীনের width । এখান থেকে প্রয়োজন মত width বেছে নিতে পারবেন । এ মুহূর্তে আমরা চাচ্ছি, 1170px কনটেইনার পিএসডি কে HTML এ রূপান্তর করতে । তাহলে আমাদের স্ক্রীনের width অন্তত পক্ষে 1170px এর বেশি হতে হবে । আমরা তালিকা থেকে 1280*723 বেছে নিলাম । ফলে আমাদের 1152*900 রেজ্যালূশন এর মনিটর স্ক্রিন হয়ে গেল 1280*723 রেজ্যালূশনের মনিটর । প্রয়োজনে কোণায় লেখার উপর ক্লিক করে আপনি প্রয়োজন মত width/height টাইপ করে যেকোন রেজ্যালূশনের স্ক্রীন তৈরি করে নিতে পারবেন । এখন আমরা আমাদের পিএসডি-র হুবহু ফন্ট সাইজ/এলিমেন্টের width/মার্জিন/প্যাডিং ইত্যাদি দিয়ে টেমপ্লেইট কোডিং করবো । এ্রভাবে 1170px কনটেইনারের পিএসডি কে একেবাবে পিক্সেল-পারফেক্ট করে কোডিং করা সম্ভব আমাদের ছোট মনিটর দিয়েই ।
.
যেহেতু 1170px সেহেতু বুটস্ট্রাপে এটা large screen । সুতরাং আপনি ব্যবহার করবেন col-lg-* । আপনি যদি চান medium screen (col-md-*) এবং large screen (col-lg-*) উভয় স্ক্রীনে ডিজাইন একই থাকবে তবে শুধুমাত্র col-md-* দিতে হবে । আর যদি চান small screen , medium screen এবং large screen এই তিন স্ক্রিনে একই ডিজাইন থাকবে তবে শুধুমাত্র col-sm-* ব্যবহার করবেন । অর্থাৎ নিচে যে স্ক্রিন পর্যন্ত একই রকম ডিজাইন রাখতে চান নিচের সেই ক্লাশ ব্যবহার করতে হবে ।
.
Less framework/Custom Framework এর ক্ষেত্রে সমাধান
==============================================
আগের বর্ণনা মত স্ক্রিনকে প্রয়োজনীয় রেজ্যালূশন করে নিন । একই ভাবে 1170px এ ডিজাইন করুন । তারপর রিসপনসিভে গিয়ে 1170px container কে ডিফল্ট রেখে বাকি মিডিয়া কুয়েরিগুলোতে যথারীতি ডিজাইন করবেন । লেস ফ্রেমওয়ার্কে সাধারণত 960px container ডিফল্ট রাখা থাকে । এ ক্ষেত্রে

/*large desktop 1*/
@media only screen and (min-width: 1200px) and (max-width: 1399px) {

	.container{width:1170px}
}
কে ডিফল্ট রেখে পরের গুলো সাধারণভাবে রিসপনসিভ করবেন । তার মানে হচ্ছে, 1170px এর ডিজাইন হবে মূল stylesheet এ । আর বাকীগুলোর ডিজাইন হবে মিডিয়া কুয়েরিতে ।
.
এখানে 960px container এর মিডিয়া কুয়েরি হবে

/* desktop, laptops, tablets (landscape)*/
@media only screen and (min-width: 992px) and (max-width: 1199px) {

	.container{width:960px}
}

আশা করছি আজকের টিউটোরিয়াল নতুনদের জন্য অনেক সহায়ক হবে । ভালো থাকবেন । আল্লাহ হাফেজ ।
Mohammad Shohel Rana
CEO & Founder, BDLance E-Learning