আরেকটি কারণ যা মোবাইল-প্রথম প্রতিক্রিয়াশীল ডিজাইনের উপর ফোকাস করার দিকে পরিচালিত করে তা হল বেশিরভাগ লোকেরা তাদের মোবাইল ডিভাইসের মাধ্যমে ইন্টারনেট অ্যাক্সেস করে, যা 60%। যেখানে মাত্র 20% মানুষ ডেস্কটপে ইন্টারনেট ব্যবহার করে।
এই নিবন্ধটি মোবাইল-প্রথম প্রতিক্রিয়াশীল ডিজাইন তৈরি করার নির্দেশাবলী কভার করবে।
কিভাবে মোবাইল-ফার্স্ট রেসপন্সিভ ডিজাইন সেট আপ করবেন?
প্রতিক্রিয়াশীল ডিজাইন তা মোবাইল-ফার্স্ট রেসপন্সিভ হোক বা বড় স্ক্রিনের জন্য নিচে দেওয়া পদ্ধতি অনুসরণ করে তৈরি করা যেতে পারে:
- একটি মোবাইল-প্রথম প্রতিক্রিয়াশীল ডিজাইন তৈরি করুন।
- বৃহত্তর পর্দার জন্য একটি প্রতিক্রিয়াশীল নকশা বিকাশ/তৈরি করতে মিডিয়া ক্যোয়ারী ব্যবহার/ব্যবহার করুন।
পদ্ধতি 1: একটি মোবাইল-প্রথম প্রতিক্রিয়াশীল ডিজাইন তৈরি করুন
প্রথমে, মোবাইল-ফার্স্ট ডিজাইন পদ্ধতি তৈরি করে শুরু করুন। সেই উদ্দেশ্যে, নীচে প্রদত্ত ধাপে ধাপে নির্দেশাবলীর মাধ্যমে যান।
ধাপ 1: একটি HTML স্ট্রাকচার তৈরি করুন
প্রথমে একটি HTML গঠন তৈরি করুন এবং একটি যোগ করুন “ বুটস্ট্র্যাপ ' মধ্যে <মাথা> অধ্যায়. HTML বিভাগে একটি স্টাইলশীট সংযোজন শিখতে এটিতে ক্লিক করুন লিঙ্ক . একটি মৌলিক ওয়েবসাইট কাঠামো তৈরি করার পরে সহ, <কোনও> , <হেডার> এবং <পাদলেখ> নীচে দেওয়া হিসাবে:
< শরীর ><হেডার>
<কোনও>
< উল >
< যে < ক href = '#' > বাড়ি < / ক < / যে >
< যে < ক href = '#' > আমাদের সম্পর্কে < / ক < / যে >
< যে < ক href = '#' > আমাদের সেবাসমূহ < / ক < / যে >
< যে < ক href = '#' > যোগাযোগ করুন < / ক < / যে >
< / উল >
< / না>
< / হেডার>
<প্রধান>
<বিভাগ>
< h1 > লিনাক্স হিন্টে স্বাগতম < / h1 >
< পি > একটি টিউটোরিয়াল ওয়েবসাইট। < / পি >
< / বিভাগ>
< / প্রধান>
<পাদলেখ>
< পি > লিনাক্স ইঙ্গিত কপিরাইট < / পি >
< / ফুটার>
< / শরীর >
ধাপ 2: CSS প্রয়োগ করুন
বডি বিভাগে, ' ফন্ট-পরিবার ' প্রতি ' ব্যতিত সেরিফ ” এছাড়াও প্যাডিং, মার্জিন এবং পটভূমির রঙ সেট করুন। এর পরে হেডার, ফুটার এবং নেভিগেশনে CSS প্রয়োগ করুন:
শরীর {ফন্ট-পরিবার : ব্যতিত সেরিফ ;
মার্জিন : 0 ;
প্যাডিং : 0 ;
পেছনের রং : #808080 ;
}
হেডার {
পেছনের রং : বেগুনি ;
রঙ : সাদা ;
প্যাডিং : 8px ;
}
nav ul {
তালিকা-শৈলী-প্রকার : কোনটি ;
প্যাডিং : 0 ;
মার্জিন : 0 ;
}
তাদের জাহাজ {
মার্জিন : 4px 0 ;
}
nav ul li a {
রঙ : সাদা ;
পাঠ্য-সজ্জা : কোনটি ;
}
প্রধান {
প্যাডিং : 18px ;
}
ফুটার {
পেছনের রং : গোলাপী ;
রঙ : সাদা ;
পাঠ্য-সারিবদ্ধ : কেন্দ্র ;
প্যাডিং : 8px ;
}
যেমন লক্ষ্য করা যায়, নীচের আউটপুট নিশ্চিত করেছে যে ডিজাইনটি মোবাইল-প্রথম প্রতিক্রিয়াশীল:
পদ্ধতি 2: বড় স্ক্রীনের জন্য প্রতিক্রিয়াশীল ডিজাইন তৈরি করতে মিডিয়া ক্যোয়ারী ব্যবহার করুন
উপরের নকশাটি ট্যাবলেট এবং ডেস্কটপের মতো বড় পর্দার জন্যও তৈরি করা যেতে পারে। সেই উদ্দেশ্যে, ব্যবহারকারীদের CSS-এ মিডিয়া ক্যোয়ারী অন্তর্ভুক্ত করতে হবে। ট্যাবলেটগুলির প্রস্থ হল ' 786px এবং ডেস্কটপের জন্য হল ' 1024px ”
মিডিয়া প্রশ্নগুলি প্রয়োগ করতে, প্রথমে অন্তর্ভুক্ত করুন ' @মিডিয়া CSS ফাইলে ট্যাগ করুন। তারপরে, 'মিনিট-প্রস্থ' বৈশিষ্ট্যটি ' হিসাবে উল্লেখ করুন 768px ” এর মানে হল যে যখনই ন্যূনতম স্ক্রীন সাইজ “768px” বা তার উপরে পূরণ করা হয়, তখন নিম্নলিখিত CSS প্রযোজ্য হবে:
@মিডিয়া ( সর্বনিম্ন-প্রস্থ : 768px ) {শরীর {
অক্ষরের আকার : 14px ;
}
হেডার {
প্যাডিং : 18px ;
}
nav ul {
প্রদর্শন : ফ্লেক্স ;
}
তাদের জাহাজ {
মার্জিন : 0 8px ;
}
প্রধান {
প্রদর্শন : ফ্লেক্স ;
ন্যায্যতা-সামগ্রী : স্থান - মধ্যে ;
সারিবদ্ধ আইটেম : কেন্দ্র ;
}
ফুটার {
প্যাডিং : 18px ;
}
}
নীচের আউটপুটটি দেখিয়েছে যে ডিজাইনটি বড় স্ক্রিনেও প্রতিক্রিয়াশীল:
উপসংহার
একটি মোবাইল-প্রথম প্রতিক্রিয়াশীল ডিজাইন সেট আপ করতে, প্রথমে একটি HTML কাঠামো তৈরি করুন এবং ভিউপোর্ট যোগ করুন। এরপর হেড ট্যাগে CSS ফাইল লিঙ্ক করুন। তারপর, মোবাইল-প্রথম প্রতিক্রিয়াশীল ডিজাইনের উপর ভিত্তি করে CSS প্রয়োগ করুন। উপরন্তু, ব্যবহারকারীরা মোবাইল ডিভাইসে সামঞ্জস্য করতে CSS মিডিয়া কোয়েরি যোগ করতে পারেন। এই লেখাটি একটি মোবাইল-প্রথম প্রতিক্রিয়াশীল ডিজাইন সেট আপ করার জন্য একটি বিশদ পদ্ধতি প্রদর্শন করেছে।