এই লেখাটি টেইলউইন্ড সিএসএস-এ প্রতিক্রিয়াশীল ব্রেকপয়েন্টগুলি ব্যবহার করার পদ্ধতিকে চিত্রিত করবে।
কিভাবে Tailwind এ প্রতিক্রিয়াশীল ব্রেকপয়েন্ট ব্যবহার করবেন?
Tailwind-এ প্রতিক্রিয়াশীল ব্রেকপয়েন্ট ব্যবহার করতে, প্রতিক্রিয়াশীল মডিফায়ার ব্যবহার করুন, যেমন “ sm ', ' মো ', ' এলজি ', ' xl ' এবং ' 2xl HTML প্রোগ্রামের অন্যান্য ক্লাসের সাথে। তারপর, HTML ওয়েব পৃষ্ঠাটি দেখুন এবং ব্রেকপয়েন্টগুলি সঠিকভাবে কাজ করছে তা নিশ্চিত করতে স্ক্রীনের আকার পরিবর্তন করুন।
ধাপ 1: HTML প্রোগ্রামে প্রতিক্রিয়াশীল পরিবর্তনকারী ব্যবহার করুন
একটি HTML প্রোগ্রাম তৈরি করুন এবং পছন্দসই স্টাইলিং সহ প্রতিক্রিয়াশীল মডিফায়ারগুলি ব্যবহার করুন। উদাহরণস্বরূপ, আমরা ব্যবহার করেছি ' sm ', ' মো ', ' এলজি ', ' xl ' এবং ' 2xl প্রতিক্রিয়াশীল সংশোধক:
< শরীর >
< div ক্লাস = 'h-স্ক্রিন bg-fuchsia-400 sm:bg-pink-600 md:bg-green-700 lg:bg-purple-500 xl:bg-teal-600 2xl:bg-হলুদ-500' >
< h1 ক্লাস = 'টেক্সট-7xl টেক্সট-সাদা টেক্সট-সেন্টার p-20' > লিনাক্স ইঙ্গিত < / h1 >
< / div >
< / শরীর >
এখানে:
- ' bg-fuchsia-400 ” ক্লাসের পটভূমির রঙ সেট করে fuchsia থেকে
- ' sm:bg-pink-600 ” ক্লাস ছোট পর্দার জন্য পটভূমিতে গোলাপী রঙ প্রয়োগ করে।
- ' md:bg-green-700 ” ক্লাস মাঝারি স্ক্রিনে পটভূমির রঙ সবুজে পরিবর্তন করে।
- ' lg:bg-বেগুনি-50 ” ক্লাস বড় পর্দার জন্য পটভূমির রঙ বেগুনিতে সেট করে।
- ' xl:bg-teal-600 ” ক্লাস অতিরিক্ত-বড় পর্দার জন্য পটভূমিতে টিল রঙ প্রয়োগ করে।
- ' 2xl:bg-হলুদ-500 ” ক্লাস 2xl স্ক্রিনে পটভূমির রঙকে হলুদে পরিবর্তন করে।
ধাপ 2: আউটপুট যাচাই করুন
প্রতিক্রিয়াশীল ব্রেকপয়েন্টগুলি সঠিকভাবে কাজ করছে কি না তা যাচাই করতে HTML ওয়েব পৃষ্ঠাটি দেখুন:
উপরের ওয়েব পৃষ্ঠায়, এটি লক্ষ্য করা যায় যে ওয়েব পৃষ্ঠার রঙ পর্দার আকারের সাথে পরিবর্তিত হচ্ছে যা অনুযায়ী ব্রেকপয়েন্টগুলি নির্দিষ্ট করা হয়েছিল।
উপসংহার
Tailwind-এ প্রতিক্রিয়াশীল ব্রেকপয়েন্ট ব্যবহার করতে, প্রতিক্রিয়াশীল মডিফায়ার ব্যবহার করুন, যেমন “ sm ', ' মো ', ' এলজি ', ' xl ' এবং ' 2xl HTML প্রোগ্রামের অন্যান্য ক্লাসের সাথে। এই মডিফায়ারগুলি পর্দার আকারের উপর ভিত্তি করে একটি নির্দিষ্ট উপাদানে বিভিন্ন শৈলী প্রয়োগ করতে ব্যবহৃত হয়। এই লেখাটি Tailwind CSS-এ প্রতিক্রিয়াশীল ব্রেকপয়েন্ট ব্যবহার করার পদ্ধতির উদাহরণ দিয়েছে।