`@media` এবং প্রতিক্রিয়াশীল ডিজাইন
এই নিবন্ধে @media এবং প্রতিক্রিয়াশীল ডিজাইন সম্পর্কে ব্যাখ্যা করা হয়েছে।
আপনি @media-এর মৌলিক সিনট্যাক্স ও ব্যবহারিক উদাহরণগুলোর মাধ্যমে কিভাবে নমনীয় লেআউট তৈরি করবেন তা শিখবেন।
YouTube Video
প্রিভিউর জন্য HTML
css-responsive-media.html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>CSS Properties Example</title>
7 <link rel="stylesheet" href="css-base.css">
8 <link rel="stylesheet" href="css-responsive-media.css">
9</head>
10<body>
11 <!-- Header -->
12 <header>
13 <h1>CSS Properties For Responsive Design</h1>
14 </header>
15
16 <!-- Main content -->
17 <main>
18 <header>
19 <h2>@media</h2>
20 </header>
21 <article>
22 <h3>@media Syntax</h3>
23 <section>
24 <header><h4>CSS</h4></header>
25<pre class="sample">
26@media media-type and (condition) {
27 /* Styles applied when the media query is matched */
28}
29</pre>
30 </section>
31 </article>
32 <article>
33 <h3>@media Example : max-width</h3>
34 <section>
35 <header><h4>CSS</h4></header>
36<pre class="sample">
37@media screen and (max-width: 600px) {
38 body {
39 background-color: lightblue;
40 }
41 p {
42 font-size: 14px;
43 }
44}
45</pre>
46 </section>
47 </article>
48 <article>
49 <h3>@media Example : orientation</h3>
50 <section>
51 <header><h4>CSS</h4></header>
52<pre class="sample">
53@media screen and (orientation: landscape) {
54 body {
55 background-color: lightgreen;
56 }
57}
58</pre>
59 </section>
60 </article>
61 <article>
62 <h3>@media Example : min-width & max-width</h3>
63 <section>
64 <header><h4>CSS</h4></header>
65<pre class="sample">
66@media screen and (min-width: 768px) and (max-width: 1024px) {
67 body {
68 background-color: lightgray;
69 }
70}
71</pre>
72 </section>
73 </article>
74 <article>
75 <h3>@media Example : devices</h3>
76 <section>
77 <header><h4>CSS</h4></header>
78<pre class="sample">
79/* Mobile styles */
80@media screen and (max-width: 600px) {
81 body {
82 font-size: 14px;
83 }
84}
85
86/* Tablet styles */
87@media screen and (min-width: 601px) and (max-width: 1024px) {
88 body {
89 font-size: 16px;
90 }
91}
92
93/* Desktop styles */
94@media screen and (min-width: 1025px) {
95 body {
96 font-size: 18px;
97 }
98}
99</pre>
100 </section>
101 </article>
102 </main>
103</body>
104</html>@media নিয়মাবলী
@media একটি নিয়ম যা নির্দিষ্ট শর্তের ভিত্তিতে স্টাইল প্রয়োগ করার জন্য CSS মিডিয়া ক্যোয়ারি ব্যবহার করে। এটি ডিভাইসের স্ক্রিন সাইজ, অরিয়েন্টেশন, রেজোলিউশন বা অন্যান্য বৈশিষ্ট্য অনুসারে বিভিন্ন CSS প্রয়োগ করার অনুমতি দেয়। মূলত রেসপনসিভ ডিজাইনের জন্য ব্যবহৃত হয়, এটি ডেস্কটপ, ট্যাবলেট এবং মোবাইলের মতো বিভিন্ন ডিভাইসে চেহারা সামঞ্জস্য করতে সাহায্য করে।
মূল সিনট্যাক্স
1@media media-type and (condition) {
2 /* Styles applied when the media query is matched */
3}media-type-এ, মিডিয়ার ধরন উল্লেখ করুন (যেমন,screen,print)।condition-এ, স্ক্রিন সাইজ বা রেজোলিউশনের মতো শর্তাবলী উল্লেখ করুন।
মিডিয়া ধরণসমূহ
- screen: কম্পিউটার এবং স্মার্টফোনের মতো স্ক্রিনে প্রদর্শনের জন্য স্টাইল।
- print: এটি প্রিন্ট করার জন্য প্রয়োগিত স্টাইল।
- all: এটি সকল মিডিয়াতে প্রয়োগযোগ্য স্টাইল।
সাধারণভাবে ব্যবহৃত শর্তাবলী
- min-width / max-width: স্ক্রিনের সর্বনিম্ন/সর্বাধিক প্রস্থ অনুযায়ী স্টাইল প্রয়োগ করুন।
- min-height / max-height: স্ক্রিনের সর্বনিম্ন/সর্বাধিক উচ্চতা অনুযায়ী স্টাইল প্রয়োগ করুন।
- orientation: স্ক্রিনের অভিমুখ নির্ধারণ করুন (
portraitউল্লম্ব এবংlandscapeঅনুভূমিক জন্য)। - resolution: স্ক্রিনের রেজোলিউশন অনুযায়ী স্টাইল প্রয়োগ করুন (যেমন, DPI)।
উদাহরণ ব্যবহার
স্ক্রিনের প্রস্থের উপর ভিত্তি করে স্টাইলে পরিবর্তন
উদাহরণস্বরূপ, স্ক্রিনের প্রস্থ যদি 600 পিক্সেলের কম হয় তাহলে যে স্টাইল প্রয়োগ করা হবে তা উল্লেখ করার জন্য আপনি এটি এভাবে লিখতে পারেন:।
1@media screen and (max-width: 600px) {
2 body {
3 background-color: lightblue;
4 }
5 p {
6 font-size: 14px;
7 }
8}- স্ক্রিনের প্রস্থ 600px বা কম এমন ডিভাইসে, ব্যাকগ্রাউন্ডের রঙ হালকা নীল হয়ে যায় এবং অনুচ্ছেদটির ফন্টের আকার 14px হয়।
স্ক্রিনের অভিমুখের উপর ভিত্তি করে স্টাইল
যখন ডিভাইসটি ল্যান্ডস্কেপ অভিমুখে থাকে তখন স্টাইল প্রয়োগ করার জন্য আপনি এটি এভাবে লিখতে পারেন:।
1@media screen and (orientation: landscape) {
2 body {
3 background-color: lightgreen;
4 }
5}- স্ক্রিনটি ল্যান্ডস্কেপ মোডে থাকলে ব্যাকগ্রাউন্ডের রঙ হালকা সবুজ হয়ে যায়।
৩. একাধিক শর্ত একত্রিত করার উদাহরণ
আপনি একাধিক শর্তকে and দিয়ে একত্রিত করে আরও নির্দিষ্ট শর্তে স্টাইল প্রয়োগ করতে পারেন।
1@media screen and (min-width: 768px) and (max-width: 1024px) {
2 body {
3 background-color: lightgray;
4 }
5}- যদি স্ক্রিনের প্রস্থ 768px থেকে 1024px এর মধ্যে হয়, তবে ব্যাকগ্রাউন্ড রঙ হালকা ধূসর রঙে পরিবর্তন হবে।
প্রয়োগের উদাহরণ: রেসপন্সিভ ডিজাইন
1/* Mobile styles */
2@media screen and (max-width: 600px) {
3 body {
4 font-size: 14px;
5 }
6}
7
8/* Tablet styles */
9@media screen and (min-width: 601px) and (max-width: 1024px) {
10 body {
11 font-size: 16px;
12 }
13}
14
15/* Desktop styles */
16@media screen and (min-width: 1025px) {
17 body {
18 font-size: 18px;
19 }
20}রেসপন্সিভ ডিজাইনে, স্ক্রিনের প্রস্থের উপর নির্ভর করে বিভিন্ন লেআউট প্রয়োগ করা সাধারণ একটি বিষয়।
- ফন্ট আকার পরিবর্তিত হয় মোবাইলে (600px বা তার কম), ট্যাবলেটে (601px থেকে 1024px), এবং ডেস্কটপে (1025px বা তার বেশি)।
সারসংক্ষেপ
@media হল এমন একটি শক্তিশালী টুল যা ডিভাইস এবং স্ক্রিন সাইজ অনুযায়ী CSS স্টাইল পরিবর্তনের জন্য ব্যবহৃত হয়, এবং এটি রেসপন্সিভ ডিজাইনের জন্য অত্যন্ত গুরুত্বপূর্ণ। min-width এবং max-width এর মতো শর্তগুলি দক্ষতার সাথে ব্যবহার করে আপনি বিভিন্ন ডিভাইসের জন্য উপযোগী একটি ওয়েবসাইট তৈরি করতে পারেন।
আপনি আমাদের ইউটিউব চ্যানেলে ভিজ্যুয়াল স্টুডিও কোড ব্যবহার করে উপরের নিবন্ধটি অনুসরণ করতে পারেন। দয়া করে ইউটিউব চ্যানেলটিও দেখুন।