এইচটিএমএল এবং সিএসএস দিয়ে একটি প্রতিক্রিয়াশীল ওয়েবসাইট ডিজাইন তৈরি করার পদক্ষেপগুলি কী কী?

এই নিবন্ধটি ব্যবহার করে HTML এবং CSS-এ একটি প্রতিক্রিয়াশীল ওয়েবসাইট ডিজাইন তৈরি করার পদক্ষেপগুলি প্রদর্শন করে:

• ভিউপোর্ট মেটা ট্যাগ
• প্রতিক্রিয়াশীল ছবি
• ফ্লেক্সবক্স লেআউট
• গ্রিড বিন্যাস
• মিডিয়া প্রশ্নের

কিভাবে HTML এবং CSS দিয়ে একটি রেসপন্সিভ ওয়েবসাইট ডিজাইন তৈরি করবেন?

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

ধাপ 1: ভিউপোর্ট মেটা ট্যাগ

দ্য ' ভিউপোর্ট মেটা ট্যাগ প্রতিক্রিয়াশীল ওয়েব ডিজাইন তৈরিতে একটি গুরুত্বপূর্ণ ভূমিকা পালন করে। এটি ভিতরে ঢোকানো হয় ' <মাথা> নিম্নলিখিত বৈশিষ্ট্য ধারণকারী HTML ফাইলের ট্যাগ:

উপরের মেটা ট্যাগের দুটি বৈশিষ্ট্য রয়েছে:

• দ্য ' নাম ” বৈশিষ্ট্যটি কার্যকারিতার নাম বলে যার জন্য এই ট্যাগটি তৈরি/ব্যবহার করা হয়েছে। উদাহরণস্বরূপ, সেট করা ' ভিউপোর্ট 'এর কাছে' নাম ” বিভিন্ন ডিভাইসের ভিউপোর্ট মোকাবেলা করার বৈশিষ্ট্য।
• দ্য ' বিষয়বস্তু ” বৈশিষ্ট্য পূর্ববর্তী বৈশিষ্ট্যের মানকে সংজ্ঞায়িত করে। এটি প্রতিটি ডিভাইসের প্রস্থ সেট করে এবং ডকুমেন্ট/ওয়েবপৃষ্ঠাকে 100% এ স্কেল করে।

ধাপ 2: প্রতিক্রিয়াশীল ছবি

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

দ্য ' সর্বোচ্চ প্রস্থ ” CSS প্রপার্টি ইমেজটিকে তার বরাদ্দকৃত জায়গার ভিতরে প্রদর্শন করা থেকে সীমাবদ্ধ করে। '%'-এ মান সেট করার মাধ্যমে, চিত্রটি তার মূল উপাদানটির আকার পরিবর্তনের সাথে পুনরায় আকার দেয়। এটি ছবির জন্য একটি প্রতিক্রিয়াশীল প্রভাব তৈরি করে।

ধাপ 3: ফ্লেক্সবক্স লেআউট

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

উপরের কোড স্নিপেটে:

• প্রথমে, “এর একটি আইডি সহ একটি প্যারেন্ট ডিভ উপাদান তৈরি করুন অভিভাবক ' ভিতরে ' ট্যাগ
• এরপরে, একাধিক চাইল্ড ডিভ উপাদান তৈরি করুন এবং তাদের একটি ক্লাস বরাদ্দ করুন “ শিশু ”
• তারপর, নির্বাচন করুন ' অভিভাবক 'শ্রেণী এবং 'এর মান প্রদান করুন ফ্লেক্স 'সিএসএসের জন্য' প্রদর্শন 'সম্পত্তি।
• এর পরে, 'এর একটি মান প্রদান করুন 1 'এর কাছে' ফ্লেক্স 'প্রতিটির সম্পত্তি' শিশু ” ক্লাস যা চাইল্ড এলিমেন্টকে ফ্লেক্স হিসেবে প্রদর্শন করে।

উপরের কোডটি কার্যকর করার পরে, ওয়েবপৃষ্ঠাটি এইরকম দেখায়:

উপরের আউটপুটটি দেখায় যে ব্রাউজারটির আকার পরিবর্তন করার সময় চাইল্ড এলিমেন্ট সমান প্রস্থ পাচ্ছে।

ধাপ 4: গ্রিড লেআউট

গ্রিড লেআউট একটি গ্রিড তৈরি করে এবং গ্রিড অংশের ভিতরে এইচটিএমএল উপাদান বরাদ্দ করে। ওয়েবপেজের স্ক্রিনের আকারের সাথে তুলনা করে গ্রিড উপাদানগুলি পরিবর্তিত হয়। এটি একটি প্রতিক্রিয়াশীল নকশা তৈরি করে কারণ এইচটিএমএল উপাদানের আকার ডিভাইসের পর্দা অনুযায়ী পরিবর্তিত হয়:

উপরের কোডে:

• প্রথমে, একটি প্যারেন্ট ডিভ তৈরি করুন এবং এটিকে 'এর একটি ক্লাস বরাদ্দ করুন উপাদান ' ভিতরে ' ট্যাগ এর পরে, এতে তিনটি চাইল্ড ডিভ উপাদান তৈরি করুন।
• তারপর, CSS ফাইলে একটি বরাদ্দ করুন “ গ্রিড 'মূল্য' প্রদর্শন 'এর জন্য সম্পত্তি' ধারক ' div
• এর পরে, ওয়েবপেজে তিনটি সমান আকারের অংশ তৈরি করুন “ গ্রিড-টেমপ্লেট-কলাম ' সম্পত্তি এবং এটি সমান সেট করুন ' 1fr 1fr 1fr ' যেখানে fr মানে ' ভগ্নাংশ ”

উপরের কোড কম্পাইল করার পরে, আউটপুট এই মত দেখায়:

আউটপুট দেখায় যে ডিভগুলি সমান অনুপাতের সাথে স্ক্রীনের আকার অনুসারে নিজেদের আকার পরিবর্তন করছে।

ধাপ 5: মিডিয়া প্রশ্ন

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

উদাহরণস্বরূপ, নীচের কোড স্নিপেট দেখুন:

উপরের কোড স্নিপেটে:

• প্রথমে, মিডিয়া কোয়েরি সেট করুন যা সিএসএস বৈশিষ্ট্যগুলিকে নির্বাচিত এলিমেন্ট ক্লাসে প্রয়োগ করে “ উপাদান 'যখন পর্দার আকারের প্রস্থ' এর থেকে বেশি হয় 640px ”
• এরপর, 'কম্পোনেন্ট ক্লাস নির্বাচন করুন এবং 'এর মান সেট করুন সবুজ অরণ্য 'এর জন্য' পেছনের রং 'সম্পত্তি।

তারপর উপরের কোড স্নিপেটের জন্য:

• প্রস্থের আকার “এর থেকে ছোট হলে শৈলী প্রয়োগ করতে মিডিয়া ক্যোয়ারী সেট করুন 1000px ”
• এখন, নির্বাচন করুন ' উপাদান 'শ্রেণী এবং 'এর একটি মান প্রদান করুন dodgerblue 'এর জন্য' পেছনের রং 'সম্পত্তি:

উপরের কোড স্নিপেটগুলি চালানোর পরে, আউটপুটটি এইরকম দেখায়:

আউটপুট দেখায় যে মিডিয়া কোয়েরি পর্দার আকারের উপর ভিত্তি করে পটভূমি পরিবর্তন করছে। ফন্টের আকার, প্রস্থ, উচ্চতা এবং অন্যান্য CSS বৈশিষ্ট্যগুলিও একই প্যাটার্ন অনুসরণ করে প্রয়োগ করা যেতে পারে।

মিডিয়া ক্যোয়ারী ব্যবহার করার সময় সম্ভাব্য ব্রেকপয়েন্ট স্ক্রীন মাপ বিবেচনা করা হয়:

• জন্য ' ছোট 'স্ক্রীনের আকার, প্রস্থ 'এর চেয়ে ছোট সেট করুন 640px ”
• জন্য ' মধ্যম ' ভিউপোর্ট স্ক্রীনের আকার, প্রস্থ ' এর মধ্যে 641px ' এবং ' 1007px ”
• জন্য ' বড় ' পর্দার আকার, প্রস্থ সেট করুন ' 1008px ” বা তার চেয়ে বেশি।

উপসংহার

একটি প্রতিক্রিয়াশীল ওয়েবসাইট ডিজাইন তৈরি করতে, বিকাশকারীদের যোগ করতে হবে ' ভিউপোর্ট <মেটা> 'এ ট্যাগ করুন' <মাথা> ” ট্যাগ বিভাগ। পরবর্তী, ব্যবহার করুন ' ফ্লেক্সবক্স ' এবং ' গ্রিড লেআউট। এই লেআউট মডিউলগুলি একটি প্রতিক্রিয়াশীল নকশা তৈরি করতে সহায়তা করে। শেষ পর্যন্ত, ' মিডিয়া প্রশ্নের ” ডেভেলপারকে বিভিন্ন স্ক্রিনের আকারের জন্য একই ওয়েবসাইটের বিভিন্ন সংস্করণ স্টাইল করতে সহায়তা করুন। এই নিবন্ধটি এমন পদক্ষেপগুলি প্রদর্শন করেছে যার মাধ্যমে একটি প্রতিক্রিয়াশীল ওয়েবসাইট ডিজাইন তৈরি করা যেতে পারে।