বিভিন্ন ডিভাইস জুড়ে সামঞ্জস্যপূর্ণ ওয়েবসাইট ডিজাইন করা একটি ওয়েবসাইট যাতে যতটা সম্ভব বিভিন্ন ব্যবহারকারীর কাছে অ্যাক্সেসযোগ্য তা নিশ্চিত করার একটি গুরুত্বপূর্ণ পদক্ষেপ।

সেখানেই মিডিয়া ক্যোয়ারী আসে। CSS মিডিয়া কোয়েরি আপনাকে CSS নিয়ম প্রয়োগ করার অনুমতি দেয় তখনই যখন ব্রাউজার আপনার সংজ্ঞায়িত নিয়মের সাথে মেলে। সুতরাং, আপনি একটি নিয়ম সংজ্ঞায়িত করতে পারেন যা শুধুমাত্র তখনই প্রযোজ্য হয় যখন একজন ব্যবহারকারী একটি স্মার্টফোনে একটি ওয়েব পৃষ্ঠা দেখছেন।

এই টিউটোরিয়ালটি উদাহরণ সহ আলোচনা করবে, প্রতিক্রিয়াশীল ওয়েব ডিজাইনের মূল বিষয়গুলি, মিডিয়া কোয়েরি কীভাবে কাজ করে এবং কীভাবে আপনার নিজের CSS মিডিয়া কোয়েরিগুলি ডিজাইন করবেন। এই টিউটোরিয়ালটি পড়ার শেষে, আপনি CSS-এ মিডিয়া কোয়েরি ডিজাইন করতে বিশেষজ্ঞ হয়ে উঠবেন।

প্রতিক্রিয়াশীল ওয়েব ডিজাইন এবং মিডিয়া প্রশ্নগুলি

রেসপন্সিভ ওয়েব ডিজাইন বলতে বোঝায় অনুশীলনের একটি সেট যেখানে একজন ডেভেলপার একটি সাইটে একটি স্টাইল শীট অপ্টিমাইজ করে যাতে সাইটটি বিভিন্ন ডিভাইস এবং স্ক্রীন সাইজের বিস্তৃত পরিসরে সঠিকভাবে রেন্ডার করা যায়।

প্রতিক্রিয়াশীল ওয়েব ডিজাইন এত গুরুত্বপূর্ণ হওয়ার কারণ হল যে আউটপুট ডিভাইসটি একজন দর্শক একটি ওয়েব পৃষ্ঠা দেখার জন্য ব্যবহার করেন—এবং এর ব্রাউজার উইন্ডো এবং স্ক্রীনের আকার—ওয়েব পৃষ্ঠা কীভাবে লোড হয় তা প্রভাবিত করবে। যদি একটি ওয়েবসাইট বিভিন্ন ডিভাইস এবং স্ক্রীনের আকারের কথা মাথায় রেখে ডিজাইন করা না হয়, তাহলে কিছু ব্যবহারকারী ওয়েবসাইটে উপস্থাপিত সমস্ত সামগ্রী দেখতে কষ্ট করতে পারেন।

যদিও প্রতিক্রিয়াশীল ওয়েব ডিজাইনে ফ্লেক্সবক্স ব্যবহার করা থেকে শুরু করে আপেক্ষিক শৈলী পর্যন্ত বিস্তৃত অনুশীলনগুলিকে অন্তর্ভুক্ত করে — মিডিয়া প্রশ্নগুলি ওয়েব প্রতিক্রিয়াশীলতার কথা মাথায় রেখে ডিজাইন করা যে কোনও ওয়েবসাইটের একটি গুরুত্বপূর্ণ অংশ।

মিডিয়া ক্যোয়ারীগুলি ব্যবহার করা ডিভাইসের ধরন, একটি ডিভাইসের অভিযোজন এবং ভিউপোর্ট আকারের উপর নির্ভর করে একটি ওয়েব পৃষ্ঠায় শৈলীগুলি কীভাবে প্রদর্শিত হবে তা সামঞ্জস্য করতে দেয়৷

মিডিয়া ক্যোয়ারী ব্যবহার করে, আপনি বিভিন্ন স্ক্রীন এবং ডিভাইসের উপর ভিত্তি করে আপনার ওয়েবসাইটে উপাদানগুলিকে ভিন্নভাবে দেখাতে পারেন যার মাধ্যমে একজন ব্যবহারকারী আপনার সাইটটি দেখছেন।

81% অংশগ্রহণকারী বলেছেন যে তারা বুটক্যাম্পে যোগ দেওয়ার পরে তাদের প্রযুক্তিগত কাজের সম্ভাবনা সম্পর্কে আরও আত্মবিশ্বাসী বোধ করেছেন। আজই একটি বুটক্যাম্পের সাথে মিলিত হন৷

গড় বুটক্যাম্প গ্র্যাড একটি বুটক্যাম্প শুরু করা থেকে শুরু করে তাদের প্রথম চাকরি খোঁজা পর্যন্ত ক্যারিয়ারের পরিবর্তনে ছয় মাসেরও কম সময় কাটিয়েছে।

মিডিয়া কোয়েরি সিনট্যাক্স

CSS-এ একটি মিডিয়া কোয়েরি ঘোষণা করতে, আপনাকে @media ব্যবহার করতে হবে নিয়ম. এই নিয়মটি আপনাকে CSS বৈশিষ্ট্যগুলির একটি ব্লক চালানোর অনুমতি দেয় শুধুমাত্র যদি একটি নির্দিষ্ট শর্ত সত্য হিসাবে মূল্যায়ন করে।

এখানে একটি CSS মিডিয়া কোয়েরির জন্য মৌলিক সিনট্যাক্স রয়েছে:

@media media-type and (media-rule) {
	// CSS styles
}

এই মিডিয়া কোয়েরির প্রধান উপাদানগুলি এখানে রয়েছে:

• @media একটি মিডিয়া ক্যোয়ারী তৈরি করতে ব্রাউজারকে নির্দেশ দেয়।
• মিডিয়া-টাইপ কোডটি যে ধরনের মিডিয়ার জন্য ব্যবহার করা হবে (যেমন স্ক্রিন বা প্রিন্ট)।
• এবং একটি যৌক্তিক অপারেটর যা একটি মিডিয়া প্রকার এবং একটি মিডিয়া নিয়ম উভয় নির্দিষ্ট করার সময় আমাদের ব্যবহার করতে হবে৷
• মিডিয়া-রুল মিডিয়া ক্যোয়ারীতে CSS কার্যকর করার জন্য বিবৃতিটি সত্যে মূল্যায়ন করা আবশ্যক।
• CSS শৈলী মিডিয়া-নিয়ম সত্য হিসাবে মূল্যায়ন করা হলে একটি ওয়েব উপাদানে প্রয়োগ করা হবে এমন নিয়মগুলি৷

মিডিয়া কোয়েরির সাথে ব্যবহার করা যেতে পারে এমন চারটি মিডিয়া প্রকার রয়েছে। এই সব, প্রিন্ট, পর্দা, এবং বক্তৃতা. ডিফল্টরূপে, মান all ব্যবহৃত হয়, এবং একাধিক মিডিয়া প্রকার কমা ব্যবহার করে প্রতিটি প্রকারকে আলাদা করে নির্দিষ্ট করা যেতে পারে।

CSS মিডিয়া নিয়ম

কিছু নিয়মের ধরন আছে যা মিডিয়া কোয়েরিতে প্রয়োগ করা যেতে পারে। আসুন পৃথকভাবে এই প্রতিটি ভাঙ্গা যাক.

প্রস্থ এবং উচ্চতা

CSS মিডিয়া নিয়মের সাথে ব্যবহৃত প্রধান নিয়মের ধরনগুলি হল ডিভাইসের প্রস্থ এবং উচ্চতা। এই নিয়মগুলি ভিউপোর্ট কন্টেইনারের আকারের উপর নির্ভর করে একটি ওয়েব উপাদানে শৈলী প্রয়োগ করার অনুমতি দেয়। শব্দটি viewport container একজন ব্যবহারকারীর কাছে দৃশ্যমান একটি ওয়েব পৃষ্ঠার এলাকা বোঝায়।

প্রস্থ এবং উচ্চতার নিয়মগুলি একটি শৈলী প্রয়োগ করতে ব্যবহৃত হয় যদি ভিউপোর্টটি একটি নির্দিষ্ট আকারের সমান হয়। সুতরাং, যদি আপনি একটি ওয়েব পৃষ্ঠায় সমস্ত

ট্যাগের পাঠ্যের রঙ পরিবর্তন করতে চান যদি ভিউপোর্টটি 500px লম্বা হয় তবে আপনি এই নিয়মটি ব্যবহার করে তা করতে পারেন:

@media screen and (width: 500px) {
	p {
		color: blue;
	}
}

এই নিয়মটি সমস্ত

ট্যাগের পাঠ্যের রঙকে blue সেট করে যদি ভিউপোর্টের প্রস্থ ঠিক 500px হয়।

বেশিরভাগ ক্ষেত্রে, যদিও, আপনি রেঞ্জ ব্যবহার করে একটি মিডিয়া ক্যোয়ারী প্রয়োগ করতে চাইবেন। সুতরাং, উদাহরণস্বরূপ, আপনি একটি ওয়েব পৃষ্ঠার ফন্টের আকার পরিবর্তন করতে চাইতে পারেন যদি ভিউপোর্টের আকার 500px এর সমান বা তার বেশি হয়। সেখানেই ন্যূনতম-প্রস্থ এবং সর্বনিম্ন-উচ্চতার শৈলীগুলি আসে।

ভিউপোর্টের প্রস্থ 500px-এর বেশি হলে আমরা যদি সমস্ত

উপাদানের পাঠ্যের রঙ পরিবর্তন করতে চাই, তাহলে আমরা নিম্নলিখিত নিয়মটি ব্যবহার করতে পারি:

@media screen and (min-width: 500px) {
	p {
		color: blue;
	}
}

এই নিয়মটি সমস্ত

উপাদানের পাঠ্যের রঙ নীলে সেট করে, কিন্তু শুধুমাত্র যদি ভিউপোর্ট প্রস্থ 500px এর সমান বা তার বেশি হয়। এই মিডিয়া কোয়েরিটি যেভাবে কাজ করে তা হল শর্তটি হল ন্যূনতম-প্রস্থ:500px মূল্যায়ন করা হয়, যা ভিউপোর্টের প্রস্থ 500px এর সমান বা বেশি কিনা তা পরীক্ষা করে। এই শর্তটি সত্যে মূল্যায়ন করলে, আমাদের p-এর নিয়মগুলি শৈলী ওয়েব পৃষ্ঠায় প্রয়োগ করা হয়।

অরিয়েন্টেশন

উপরন্তু, মিডিয়া প্রশ্নগুলি একটি ডিভাইসের অভিযোজনের উপর নির্ভর করে একটি ওয়েব পৃষ্ঠায় শৈলী প্রয়োগ করতে ব্যবহার করা যেতে পারে।

ধরুন আমরা সমস্ত h2 উপাদানের টেক্সট সাইজ 20px এ সেট করতে চাই যদি ব্যবহারকারী আমাদের ওয়েব পেজ ল্যান্ডস্কেপ মোডে দেখছেন। আমরা এই কোডটি ব্যবহার করে তা করতে পারি:

@media (orientation: landscape) {
	h2 {
		font-size: 20px;
	}
}

এই নিয়মটি চেক করে যে ব্যবহারকারী ল্যান্ডস্কেপ মোডে ওয়েব পৃষ্ঠাটি দেখছেন কিনা এবং সমস্ত

উপাদানের ফন্ট সাইজ 20px সেট করে যদি সেই শর্তটি সত্য হিসাবে মূল্যায়ন করা হয়।

ডিফল্টরূপে, ডেস্কটপ ল্যান্ডস্কেপ অভিযোজন ব্যবহার করে।

CSS মিডিয়া কোয়েরি উদাহরণ

আপনি কিভাবে CSS-এ আপনার নিজের মিডিয়া প্রশ্ন লিখতে পারেন তা বোঝাতে আসুন দুটি উদাহরণ মিডিয়া কোয়েরির মাধ্যমে চলুন।

বেসিক মিডিয়া কোয়েরি উদাহরণ:উপাদান লুকান

ধরুন আমরা একটি ওয়েবসাইট ডিজাইন করছি এবং আমরা একটি বক্স দেখতে চাই যা দেখায় This site is in beta . সব মোবাইল ডিভাইসে। এই বাক্সটি শুধুমাত্র মোবাইল ডিভাইসে উপস্থিত হওয়া উচিত কারণ আমরা এখনও আমাদের মোবাইল অভিজ্ঞতা পরীক্ষা করছি৷

আমরা নিম্নলিখিত কোড ব্যবহার করে এই বাক্সটি তৈরি করতে পারি:

<html>

<p class="betaBox">This site is in beta.</p>
<html>
  
<style>

.betaBox {
	background-color: orange;
	padding: 10px;
}
<style>
@media screen and (max-width: 600px) {
	.betaBox {
		display: none;
	}
}

আমাদের কোড রিটার্ন করে:

আসুন আমাদের কোড ভাঙ্গা যাক। আমাদের HTML ফাইলে, আমরা একটি

ট্যাগ সংজ্ঞায়িত করেছি যাতে পাঠ্য অন্তর্ভুক্ত থাকে This site is in beta .

ট্যাগের জন্য নির্ধারিত ক্লাস হল betaBox .

আমাদের CSS ফাইলে, আমরা দুটি শৈলী নির্দিষ্ট করেছি। .betaBox শৈলী betaBox ক্লাসের নাম সহ যেকোনো উপাদানের পটভূমির রঙ সেট করে। কমলা থেকে এবং উপাদানের বিষয়বস্তু এবং এর সীমানার মধ্যে একটি 10px প্যাডিং স্পেস তৈরি করে।

পরবর্তী নিয়ম একটি মিডিয়া ক্যোয়ারী ব্যবহার করে। আমাদের মিডিয়া ক্যোয়ারীতে, max-width:600px আমাদের ব্রাউজারকে বলে যে স্টাইল নিয়মটি শুধুমাত্র তখনই প্রয়োগ করা উচিত যদি ভিউপোর্ট 600px এর চেয়ে সরু হয়। সুতরাং, যদি একজন ব্যবহারকারী মোবাইল ডিভাইসে আমাদের সাইট দেখেন, তাহলে এই স্টাইলটি চালু করা হবে।

যদি আমাদের মিডিয়া ক্যোয়ারীটি কার্যকর করা হয়, তাহলে ডিসপ্লে:none নিয়ম .betaBox ক্লাস নামের প্রতিটি উপাদানে প্রয়োগ করা হয় না .

একাধিক মিডিয়া প্রশ্নের উদাহরণ:ফন্টের আকার

আমাদের পূর্ববর্তী উদাহরণে, আমরা শুধুমাত্র একটি মিডিয়া ক্যোয়ারী নির্দিষ্ট করেছি। যাইহোক, আপনি একটি CSS ফাইলে একাধিক মিডিয়া ক্যোয়ারী নির্দিষ্ট করতে পারবেন, যার মানে হল আপনি একাধিক শর্তের মধ্যে একটি পূরণ হয়েছে কিনা তার উপর নির্ভর করে একটি ওয়েব পৃষ্ঠার একটি উপাদানে নির্দিষ্ট শৈলী প্রয়োগ করতে পারেন।

ধরুন আমরা একটি ওয়েবসাইট ডিজাইন করছি এবং আমরা চাই আমাদের

হেডারের ফন্ট সাইজ পর্দার আকারের উপর নির্ভর করে পরিবর্তন হোক। এখানে আমরা আমাদের সাইটে প্রয়োগ করতে চাই নিয়ম:

• যদি স্ক্রিনের প্রস্থ 480px এর সমান বা কম হয়, তাহলে আমাদের হেডারের ফন্ট সাইজ 16px হওয়া উচিত।
• যদি স্ক্রিনের প্রস্থ 481px এর সমান এবং 600px এর সমান বা তার কম হয়, তাহলে হেডার ফন্টের আকার 20px হওয়া উচিত।
• স্ক্রীনের প্রস্থ 601px এর সমান বা তার বেশি হলে, হেডার ফন্ট সাইজ 24px হওয়া উচিত।

ব্যবহারকারীর স্ক্রিনের আকারের উপর নির্ভর করে আমাদের ওয়েব পৃষ্ঠায় ফন্টের আকার পরিবর্তন করতে আমরা নিম্নলিখিত তিনটি মিডিয়া প্রশ্ন ব্যবহার করতে পারি:

<html>

<h1>This is an example header.</h1>
<html>
  
<style>

@media screen and (min-width: 480px) {
	h1 {
		font-size: 16px;
	}
}

@media screen and (min-width: 481px) and (max-width: 600px) {
	h1 {
		font-size: 20px;
	}
}

@media screen and (min-width: 601px) {
	h1 {
		font-size: 24px;
	}
}
<style>

আমাদের HTML/CSS কোডের আউটপুট দেখতে উপরের কোড এডিটরে বোতাম।

আসুন আমাদের কোড কীভাবে কাজ করে তা ভাঙ্গুন। আমাদের HTML ফাইলে, আমরা একটি

ট্যাগ ব্যবহার করে একটি উদাহরণ শিরোনাম সংজ্ঞায়িত করেছি যা পাঠ্য দেখায় This is an example header .

তারপর, আমাদের CSS ফাইলে, আমরা তিনটি মিডিয়া প্রশ্ন সংজ্ঞায়িত করেছি।

প্রথম মিডিয়া ক্যোয়ারী ব্রাউজার ভিউপোর্টের আকার 480px (সর্বোচ্চ-প্রস্থ:480px ব্যবহার করে) এর সমান বা কম কিনা তা পরীক্ষা করে এবং এই বিবৃতিটি সত্য হিসাবে মূল্যায়ন করলে সমস্ত

উপাদানের ফন্টের আকার 16px সেট করে। পি>

দ্বিতীয় মিডিয়া ক্যোয়ারী ভিউপোর্টের আকার 481px এর সমান বা তার বেশি (মিনিমাম-প্রস্থ:481px ব্যবহার করে) এবং 600px এর সমান বা কম (সর্বোচ্চ-প্রস্থ:600px ব্যবহার করে) পরীক্ষা করে। যদি এটি সত্য হিসাবে মূল্যায়ন করা হয়, সমস্ত

উপাদানগুলির জন্য ফন্টের আকার 20px সেট করা হয়।

তৃতীয় মিডিয়া ক্যোয়ারী ভিউপোর্টের আকার 601px (মিনিট-প্রস্থ:601px ব্যবহার করে) এর চেয়ে বেশি কিনা তা পরীক্ষা করে। এই নিয়মটি সত্য হিসাবে মূল্যায়ন করলে, সমস্ত

উপাদানের ফন্টের আকার 24px এ পরিবর্তিত হয়।

মিডিয়া কোয়েরি ব্রেকপয়েন্ট

ব্রেকপয়েন্টগুলি পয়েন্টগুলি সেট করতে ব্যবহৃত হয় যেখানে একটি ওয়েবসাইট একটি মিডিয়া ক্যোয়ারী প্রয়োগ করবে।

আপনি যখন একটি মিডিয়া ক্যোয়ারী ডিজাইন করছেন, তখন আপনি নিজেকে প্রশ্ন করতে পারেন:আমার মিডিয়া ক্যোয়ারী সেট করতে আমার কোন মাপ ব্যবহার করা উচিত? এটি একটি যুক্তিসঙ্গত প্রশ্ন, কারণ আপনি যখন প্রতিক্রিয়াশীল ওয়েব ডিজাইন দিয়ে শুরু করছেন তখন আপনার ওয়েবসাইটটি রেন্ডার করা উচিত এমন ডিভাইসগুলির আকারগুলি বের করা আপনার পক্ষে কঠিন হতে পারে৷

ইন্টারনেটে এমন তালিকা রয়েছে যা নির্দিষ্ট স্ক্রিনের আকারকে লক্ষ্য করে, যা আপনার মিডিয়া প্রশ্নের জন্য ব্রেকপয়েন্ট সেট করতে কার্যকর হতে পারে। যাইহোক, ডিভাইসগুলির বিস্তৃত পরিসরের কারণে যা সেখানে রয়েছে-যার সকলের নিজস্ব স্ক্রীনের আকার এবং বৈশিষ্ট্য রয়েছে-এই তালিকাগুলি সাধারণত সমস্ত প্রধান পয়েন্টগুলিকে কভার করে না।

মিডিয়া ক্যোয়ারী কখন ট্রিগার করা উচিত তা বেছে নেওয়ার সর্বোত্তম উপায় হল আপনার ওয়েবসাইটটি এমন যেকোন জায়গা যেখানে উপাদানগুলি স্কোয়াশ বা ছাঁটা হয়ে গেছে তা খুঁজে বের করা৷ সুতরাং, আপনি যদি এমন একটি উপাদান দেখতে পান যা একটি মোবাইল ডিভাইসে সম্পূর্ণরূপে দৃশ্যমান নয়, আপনি জানেন যে আপনাকে একটি ব্রেকপয়েন্ট যোগ করতে হতে পারে৷

তারপর, একবার আপনি এই পয়েন্টগুলি চিহ্নিত করলে, আপনি কাস্টম মিডিয়া নিয়ম লিখতে পারেন। উদাহরণ স্বরূপ, আপনি বুঝতে পারেন যে একটি