এই পোস্টে মিডিয়া প্রশ্ন বাস্তবায়নের জন্য প্রয়োজনীয় নির্দেশিকা উল্লেখ করা হবে।
কিভাবে মোবাইল ডিভাইসের জন্য মিডিয়া কোয়েরি বাস্তবায়ন করবেন?
মিডিয়া ক্যোয়ারী মোবাইল ডিভাইসে প্রয়োগ করা যেতে পারে কেবল উল্লেখ করে ' @মিডিয়া ” ট্যাগ করুন এবং ছোট বন্ধনীতে পর্দার আকার নির্দিষ্ট করুন৷ সেই মিডিয়া কোয়েরির জন্য CSS তারপর কোঁকড়া ধনুর্বন্ধনীর ভিতরে যোগ করা যেতে পারে। যখনই স্ক্রীনের আকার ব্যবহারকারীর দ্বারা নির্দিষ্ট করা আকারের সাথে মিলিত হয়, তখন এটি বিবৃত মিডিয়া কোয়েরি প্রয়োগ করবে।
চলুন মোবাইল ডিভাইসের জন্য মিডিয়া কোয়েরি বাস্তবায়ন শিখতে একটি ব্যবহারিক উদাহরণ দেখি।
উদাহরণ: মিডিয়া কোয়েরি প্রয়োগ করে একটি লেআউট তৈরি করুন যা দুটি কলামের বিন্যাস থেকে এক কলাম বিন্যাসে পরিবর্তিত হয়
নীচের উদাহরণে, ওয়েব পৃষ্ঠার বিন্যাস একটি কলাম বিন্যাস থেকে একটি একক-কলাম বিন্যাসে পরিবর্তিত হবে:
ধাপ 1: একটি HTML স্ট্রাকচার তৈরি করুন
- প্রথমে একটি HTML ফাইল তৈরি করুন এবং এর মধ্যে বাহ্যিক CSS স্টাইলশীট ফাইলটি লিঙ্ক করুন <মাথা> অধ্যায়.
- তারপর, একটি তৈরি করুন <হেডার> বিভাগ এবং ব্যবহার করে ওয়েবসাইটের শিরোনাম যোগ করুন ট্যাগ
- একটা তৈরি কর 'container-class' এর ক্লাস নাম এবং এর ভিতরে আরো দুটিএর ক্লাস নাম আছে ' কলাম ” < শরীর >
<হেডার>
< h1 > লিনাক্স ইঙ্গিত < / h1 >
< / হেডার>
< div ক্লাস = 'পাত্র-শ্রেণী' >
< div ক্লাস = 'কলাম' >
< h2 > সেকশন ওয়ান < / h2 >
< পি > লিনাক্স হিন্ট হল অন্যতম সেরা ই-লার্নিং প্ল্যাটফর্ম। < / পি >
< / div >
< div ক্লাস = 'কলাম' >
< h2 > ধারা দুই < / h2 >
< পি > লিনাক্স হিন্ট হল অন্যতম সেরা ই-লার্নিং প্ল্যাটফর্ম। < / পি >
< / div >
< / div >
< / শরীর >ধাপ 2: CSS প্রয়োগ করুন
শরীরের অংশে:- প্রথমে, ' লিখে বডি বিভাগটি নির্দিষ্ট করুন শরীর ” ট্যাগ এবং কোঁকড়া ধনুর্বন্ধনী উল্লেখ.
- ধনুর্বন্ধনীর ভিতরে, ফন্ট পরিবার, পটভূমির রঙ, মার্জিন এবং প্যাডিং নির্দিষ্ট করুন।
উপরে <হেডার> অধ্যায়:
- টেক্সট কালার, টেক্সট অ্যালাইনমেন্ট, ব্যাকগ্রাউন্ড কালার এবং প্যাডিং উল্লেখ করুন।
উপরে 'পাত্র-শ্রেণী' div:
- স্থির কর ' প্রদর্শন ' সম্পত্তি মান ' ফ্লেক্স ফ্লেক্সবক্স তৈরি করতে।
- ব্যবহার ' ন্যায্যতা-সামগ্রী ” বিষয়বস্তুর মধ্যে স্থান যোগ করতে এবং প্যাডিং যোগ করতে।
কলাম ক্লাসে:
- প্রথমে, উল্লিখিত মান নির্দিষ্ট করুন ' ফ্লেক্স দুটি লেআউট বিভাগের মধ্যে একটি স্থান যোগ করার জন্য সম্পত্তি।
- এর পরে, পটভূমির রঙ, সীমানা, প্যাডিং এবং বাক্সের আকার যোগ করুন।
ধাপ 3: মিডিয়া কোয়েরি প্রয়োগ করুন
- মোবাইল ডিভাইসের জন্য মিডিয়া ক্যোয়ারী প্রয়োগ করতে, প্রথমে যোগ করুন “ @মিডিয়া ট্যাগ
- তারপর, মান উল্লেখ করুন ' 768px ' যা মোবাইল ডিভাইসের জন্য সাধারণ ' সর্বোচ্চ প্রস্থ ” ছোট ধনুর্বন্ধনী মধ্যে সম্পত্তি.
- এর পরে, নির্দিষ্ট করুন ' কলাম 'মূল্য' ফ্লেক্স-দিক 'সম্পত্তি যা প্রযোজ্য হবে' কন্টেইনার-ক্লাস' ক্লাস। যখনই নির্দিষ্ট স্ক্রিনের আকার সনাক্ত করা হবে তখন এটি দুটি কলামকে একটি কলামে পরিবর্তন করবে।
- সবশেষে, সিএসএস প্রয়োগ করুন “ কলাম 'শ্রেণী এবং নির্দিষ্ট করুন' মার্জিন ' এবং ' ফ্লেক্স 'মান:
font-family: sans-serif;
পটভূমি- রঙ : রূপা;
মার্জিন: 0 ;
প্যাডিং: 0 ;
}
হেডার {
পটভূমি- রঙ : #2f4f4f;
প্যাডিং: 20px;
পাঠ্য- সারিবদ্ধ : কেন্দ্র;
রঙ : সাদা;
}
.পাত্র- ক্লাস {
প্রদর্শন: flex;
ন্যায্যতা- বিষয়বস্তু : স্থান-এর মধ্যে;
প্যাডিং: 20px;
}
.কলাম {
ফ্লেক্স: 0 1 ক্যালক ( পঞ্চাশ % - 10px ) ;
সীমান্ত : 1px কঠিন সবুজ;
পটভূমি- রঙ : সাদা;
box-sizing: বর্ডার-বক্স;
প্যাডিং: 20px;
}
@ মিডিয়া ( সর্বোচ্চ- প্রস্থ : 768px ) {
.পাত্র- ক্লাস {
flex-direction: column;
}
.কলাম {
ফ্লেক্স: 0 1 100 %;
মার্জিন-নিচ: 20px;
}
}আউটপুট
মিডিয়া ক্যোয়ারী প্রয়োগ করার পর ওয়েব পেজের আউটপুট এখানে। এই আউটপুটটি একটি দুই-কলামের প্রতিক্রিয়াশীল বিন্যাস:
যখনই স্ক্রীন মোবাইলের জন্য একটি মিডিয়া ক্যোয়ারী ব্যবহার করে নির্দিষ্ট মাত্রা পূরণ করে, এটি একটি এক-কলাম লেআউটে পরিণত হয়:
উপসংহার
মোবাইল ডিভাইসের জন্য মিডিয়া কোয়েরি বাস্তবায়ন করতে, প্রথমে অন্তর্ভুক্ত করুন “ ভিউপোর্ট ' মধ্যে ' মাথা ' অধ্যায়. তারপর, মোবাইল ডিজাইন-নির্দিষ্ট CSS লিখুন। এর পরে, “@media” ট্যাগ ব্যবহার করে এবং মোবাইল স্ক্রীনের আকার নির্দিষ্ট করে মিডিয়া ক্যোয়ারী যোগ করুন। উদাহরণস্বরূপ, ট্যাবলেটের জন্য 768px এবং মোবাইল ফোনের জন্য 480px নির্দিষ্ট করুন৷ এই নিবন্ধটি মোবাইল ডিভাইসের জন্য মিডিয়া প্রশ্ন বাস্তবায়নের পদ্ধতি ব্যাখ্যা করেছে।