উভয় মিনিট-প্রস্থ এবং সর্বোচ্চ-প্রস্থের মিডিয়া প্রশ্নের জন্য সিনট্যাক্স
প্রতিক্রিয়াশীল ওয়েব ডিজাইন ওয়েবপৃষ্ঠাগুলি নির্মাণের একটি পদ্ধতি যেখানে ঐ পৃষ্ঠাগুলি দর্শকদের পর্দার আকারের উপর ভিত্তি করে তাদের লেআউট এবং চেহারা পরিবর্তন করতে পারে। বৃহত্তর স্ক্রিনগুলি বড় প্রদর্শনগুলির উপযোগী একটি লেআউট পেতে পারে, যখন ছোট ডিভাইসগুলি, যেমন মোবাইল ফোনের মতো একই ওয়েবসাইটটি এমনভাবে ফর্ম্যাট করা যায় যা সেই ছোট পর্দার জন্য উপযুক্ত। এই পদ্ধতিটি সমস্ত ব্যবহারকারীদের জন্য একটি ভাল ব্যবহারকারীর অভিজ্ঞতা প্রদান করে এবং এটি এমনকি সার্চ ইঞ্জিন র্যাংকিংকে উন্নত করতে সাহায্য করতে পারে। প্রতিক্রিয়াশীল ওয়েব ডিজাইনের একটি গুরুত্বপূর্ণ অংশ হল সিএসএস মিডিয়া প্রশ্ন।
মিডিয়া প্রশ্নগুলি আপনার ওয়েবসাইটের CSS ফাইলের মধ্যে সামান্য শর্তাধীন বিবৃতিগুলির মত, কিছু নির্দিষ্ট CSS নিয়মগুলি সেট করার অনুমতি দেয় যা নির্দিষ্ট শর্ত পূরণের পরে কেবলমাত্র প্রভাবিত হবে - যেমন যখন একটি স্ক্রিনের আকার নির্দিষ্ট থ্রেশহোল্ডগুলির উপরে বা নীচে থাকে
কর্মে মিডিয়া প্রশ্ন
সুতরাং কিভাবে আপনি একটি ওয়েবসাইটের মিডিয়া প্রশ্নগুলি ব্যবহার করবেন? এখানে একটি খুব সহজ উদাহরণ:
- আপনি কোনও ভিজ্যুয়াল স্টাইলগুলি থেকে ভাল-সুষম HTML ডকুমেন্ট দিয়ে শুরু করতে পারবেন (এটি হল CSS কি)
- আপনার CSS ফাইলে, আপনি সাধারণত পৃষ্ঠাটি স্টাইল করে এবং ওয়েবসাইটটি কেমন দেখাবে তার জন্য ভিত্তিরেখা সেট করার মাধ্যমে আপনি শুরু করবেন। বলুন আপনি পৃষ্ঠাটির ফন্ট সাইজ 16 পিক্সেল হতে চান, আপনি এই CSS লিখতে পারেন: body {font-size: 16px; }
- এখন, আপনি এমন বড় স্ক্রিনের জন্য ফন্ট সাইজ বাড়িয়ে নিতে পারেন যা যথেষ্ট রিয়েল এস্টেট আছে। এই হল যেখানে মিডিয়া অনুসন্ধানগুলি লক করে। আপনি এটির মত একটি মিডিয়া অনুসন্ধান শুরু করবেন: @ মিডিয়া স্ক্রিন এবং (মিনিট-প্রস্থ: 1000px) {}
- এটি একটি মিডিয়া প্রশ্নের সিনট্যাক্স। এটি মিডিয়া ক্যোয়ারী নিজেই প্রতিষ্ঠার জন্য @ মিডিয়া দিয়ে শুরু হয়। পরবর্তী আপনি "মিডিয়া টাইপ" সেট করুন, যা এই ক্ষেত্রে "স্ক্রিন"। এটি ডেস্কটপ কম্পিউটার স্ক্রিন, ট্যাবলেট, ফোনে ইত্যাদি ক্ষেত্রে প্রযোজ্য। অবশেষে, আপনি "মিডিয়া বৈশিষ্ট্য" দিয়ে মিডিয়া অনুসন্ধান শেষ করেন। উপরে আমাদের উদাহরণে, এটি "মধ্য প্রস্থ: 1000 পিক্স" এর মানে হল যে মিডিয়া ক্যোয়ারী সর্বনিম্ন প্রস্থের 1000 পিক্সেল প্রস্থের সাথে প্রদর্শন করার জন্য দৌড়াচ্ছে।
- মিডিয়া ক্যোয়ারির এই উপাদানগুলির পরে, আপনি কোনও সাধারণ সিএসএস নিয়মতে যা করবেন তার অনুরূপ একটি খোলার এবং বন্ধ কারি ব্রেস যোগ করুন।
- এই শর্ত পূরণ করা হয় একবার সিএসএস নিয়ম যোগ করার জন্য একটি মিডিয়া প্রশ্নের সর্বশেষ ধাপ হল আপনি আবেদন করতে চান আপনি এই সিএসএস নিয়মগুলি কোঁকড়া ধনুর্বন্ধনীগুলির মধ্যে যুক্ত করুন যা মিডিয়া ক্যোয়ারী তৈরি করে, যেমন: @ মিডিয়া স্ক্রিন এবং (মিনি-প্রস্থ: 1000 পিক্স) {body {font-size: 20px; }
- যখন মিডিয়া অনুসন্ধানের শর্ত পূরণ হয় (ব্রাউজার উইন্ডোটি কমপক্ষে 1000 পিক্সেল চওড়া), এই CSS শৈলীটি কার্যকর হবে, আমাদের সাইটের ফন্টের আকার 16 পিক্সেল থেকে পরিবর্তিত হবে যা আমরা মূলত 20 পিক্সেলের আমাদের নতুন মানে সেট করেছি।
আরও শৈলী যোগ করা
আপনার ওয়েবসাইটের চাক্ষুষ চেহারা সামঞ্জস্যের প্রয়োজন হিসাবে আপনি এই মিডিয়া প্রশ্নের মধ্যে অনেক সিএসএস নিয়ম স্থাপন করতে পারে। উদাহরণস্বরূপ, যদি আপনি শুধুমাত্র ২0 পিক্সেলের ফন্ট-আকার বৃদ্ধি না করতে চান, তবে সমস্ত অনুচ্ছেদের রং কালো (# 000000) থেকেও পরিবর্তন করতে পারেন, আপনি এটি যোগ করতে পারেন:
@ মিডিয়া স্ক্রিন এবং (মিনি-প্রস্থ: 1000 পিক্স) {শরীর {ফন্ট সাইজ: 20 পিক্স; } পি {রঙ: # 000000; }}আরো মিডিয়া প্রশ্নগুলি যোগ করা
উপরন্তু, আপনি প্রতিটি বড় মাপের জন্য আরও মিডিয়া প্রশ্নগুলি যোগ করতে পারেন, এইগুলি আপনার স্টাইল শীটে যুক্ত করতে পারেন:
@ মিডিয়া স্ক্রিন এবং (মিনি-প্রস্থ: 1000 পিক্স) {শরীর {ফন্ট সাইজ: 20 পিক্স; } পি {রঙ: # 000000; {} @ মিডিয়া স্ক্রিন এবং (মিনি-প্রস্থ: 1400 পিএক্স) {শরীর {ফন্ট-আকার: 24 পিক্স; }}প্রথম মিডিয়া প্রশ্নগুলি 1000 পিক্সেল চওড়াতে চলাচল করবে, ফন্টের আকার 20 পিক্সেল পরিবর্তন করবে। তারপর, একবার ব্রাউজার 1400 পিক্সেলের উপরে হলে, ফন্ট সাইজ আবার 24 পিক্সেলে পরিবর্তন হবে। আপনি আপনার নির্দিষ্ট ওয়েবসাইটের জন্য প্রয়োজন হিসাবে অনেক মিডিয়া প্রশ্ন যোগ করতে পারে।
ন্যূনতম-প্রস্থ এবং সর্বোচ্চ-প্রস্থ
"মিনি-প্রস্থ" বা "সর্বোচ্চ-প্রস্থ" ব্যবহার করে মিডিয়া প্রশ্নগুলি লিখতে সাধারণত দুটি উপায় থাকে। এতদূর, আমরা কর্মে "মিনিট-প্রস্থ" দেখেছি এটি একটি ব্রাউজার কমপক্ষে সর্বনিম্ন প্রস্থ পৌঁছেছে একবার মিডিয়া প্রশ্নগুলি কার্যকর করতে কারণ। তাই ব্রাউজারটি কমপক্ষে 1000 পিক্সেল চওড়া হলে "মিনি-প্রস্থ: 1000 পিক্স" ব্যবহার করে এমন একটি প্রশ্নটি প্রয়োগ হবে। যখন আপনি "মোবাইল-প্রথম" পদ্ধতিতে একটি সাইট তৈরি করছেন তখন মিডিয়া ক্যোয়ারির এই শৈলীটি ব্যবহার করা হয়।
যদি আপনি "সর্বোচ্চ-প্রস্থ" ব্যবহার করেন, এটি বিপরীত পদ্ধতিতে কাজ করে। "মাপ-প্রস্থ: 1000 পিক্স" এর একটি মিডিয়া অনুসন্ধানটি প্রয়োগ হওয়ার পরে ব্রাউজারটি এই আকারের নিচে নেমে আসবে।
পুরোনো ব্রাউজার সম্পর্কে
ইন্টারনেট এক্সপ্লোরারের পুরোনো সংস্করণে মিডিয়া ক্যয়ারির সাথে এক চ্যালেঞ্জের সমর্থনের অভাব রয়েছে। সৌভাগ্যবশত, পলিফিলগুলি পাওয়া যায় যা পুরোনো ব্রাউজারগুলিতে মিডিয়া ক্যোয়ারির জন্য সমর্থন প্যাচ করতে পারে, যা আপনি আজকে ওয়েবসাইটগুলিতে তাদের ব্যবহার করতে পারবেন এবং এটি নিশ্চিত করে যে সেই সাইটটির প্রদর্শন পুরোনো ব্রাউজার সফটওয়্যারে ভাঙা দেখায় না।
1/24/17 এ জেরেমি গিয়ার্ড দ্বারা সম্পাদিত