এই নিবন্ধটি ব্যাখ্যা করবে কিভাবে Tailwind-এ অবস্থান সম্পত্তির সাথে ব্রেকপয়েন্ট এবং মিডিয়া ক্যোয়ারী ব্যবহার করতে হয়।
অবস্থান সম্পত্তির সাথে ব্রেকপয়েন্ট এবং মিডিয়া প্রশ্নগুলি কীভাবে ব্যবহার করবেন?
ব্রেকপয়েন্ট হল একটি চূড়ান্ত প্রতিক্রিয়াশীল ডিজাইন তৈরি করার মূল ব্লক। এটি লেআউটটিকে বিভিন্ন স্ক্রীন আকারের সাথে মানিয়ে নিতে ব্যবহার করা হয়। স্ক্রীন রেজোলিউশনের উপর নির্ভর করে উপাদানগুলিতে নির্দিষ্ট শৈলী প্রয়োগ করতে মিডিয়া প্রশ্নগুলি ব্যবহার করা হয়। আউটপুটকে আরও অপ্টিমাইজ করতে পজিশন অ্যাট্রিবিউটটি এইগুলির সাথে একত্রে প্রয়োগ করা যেতে পারে।
ধাপ 1: ব্রেকপয়েন্ট এবং মিডিয়া কোয়েরি সহ অবস্থান সম্পত্তি প্রয়োগ করা
এই ধাপে, নির্বাচিত 'এর উপর ব্রেকপয়েন্ট বা মিডিয়া কোয়েরি বরাবর অবস্থান সম্পত্তি প্রয়োগ করতে প্রোগ্রামটি সন্নিবেশ করা হয় পি 'উপাদান:
< শরীর ক্লাস = 'বিজি-স্লেট-৫০০' >
< div ক্লাস = 'টেক্সট-হলুদ-300 p-4 lg:p-8' >
< পি ক্লাস = 'আপেক্ষিক md:absolute md:text-lg md:translate-x-4 md:translate-y-4 lg:text-xl lg:static lg:translate-x-4 lg:translate-y-4 ' > এই টেক্সটে পর্দার আকারের উপর ভিত্তি করে বিভিন্ন ফন্টের আকার থাকবে। এটি ছোট পর্দায় ছোট, মাঝারি পর্দায় মাঝারি আকারের এবং বড় পর্দায় বড় হবে। < / পি >
< / div >
< / শরীর >
এই কোডে:
- ' bg-slate-500 ” পটভূমির রঙ ধূসর রূপে সেট করে।
- ' টেক্সট-হলুদ-300 ” পাঠ্যের রঙ হলুদে পরিবর্তন করে।
- ' p-4 ” 4px এর একটি প্যাডিং যোগ করে।
- ' lg: p-8' বড় পর্দায় 8px এর একটি প্যাডিং যোগ করে।
- প্রাথমিক অবস্থানটি ' ব্যবহার করে মূল পৃষ্ঠার সাথে সম্পর্কিত সেট করা হয় আপেক্ষিক 'শ্রেণী।
- ' md:টেক্সট-এলজি ” একটি মাঝারি আকারের স্ক্রিনে পাঠ্যটিকে বড় করে তোলে।
- 'এমডি: পরম' একটি মাঝারি আকারের স্ক্রিনে পাঠ্যের অবস্থান আপেক্ষিক থেকে পরম পরিবর্তন করে।
- ' md:translate-x-4' এবং 'md: অনুবাদ-y-4' মাঝারি স্ক্রিনের আকারে টেক্সট 4px নিচে এবং ডানদিকে সরান।
- ' lg:text-xl ” একটি বড় আকারের স্ক্রিনে পাঠ্যের আকার অতিরিক্ত-বড় করে পরিবর্তন করে।
- ' এলজি: স্ট্যাটিক ” একটি বড় আকারের স্ক্রিনে মূল পৃষ্ঠার সাপেক্ষে পাঠ্যের অবস্থানকে পরম থেকে স্ট্যাটিক পর্যন্ত পরিবর্তন করে
- ' lg:অনুবাদ-x-4 ' এবং ' lg:অনুবাদ-y-4 ” একটি বড় স্ক্রিনের আকারে পাঠ্যটি 4px নিচে এবং ডানদিকে সরান৷
ধাপ 2: আউটপুট যাচাই করুন
উপরের কোড দ্বারা তৈরি ওয়েবপৃষ্ঠাটির পূর্বরূপ দেখুন এবং পরিবর্তনটি দেখতে পর্দার আকার সামঞ্জস্য করুন:
এটা দেখা যায় যে টেক্সট মাঝারি এবং বড় পর্দার আকারে প্রতিক্রিয়াশীল আচরণ দেখায়।
উপসংহার
টেইলউইন্ডে ব্রেকপয়েন্ট এবং মিডিয়া ক্যোয়ারী ব্যবহার করতে ব্রেকপয়েন্ট প্রয়োগ করুন এবং প্রতিটি ব্রেকপয়েন্টে মিডিয়া ক্যোয়ারী সেট করুন এবং স্ক্রিনের বিভিন্ন ব্রেকপয়েন্টে অবস্থান বৈশিষ্ট্য পরিবর্তন করুন। ডিফল্ট ব্রেকডাউনগুলি হল ' sm ', ' মো ', ' এলজি ', এবং ' xl ” এই ব্লগে দেখানো হয়েছে কিভাবে টেলউইন্ডে অবস্থান সম্পত্তি সহ ব্রেকপয়েন্ট এবং মিডিয়া ক্যোয়ারী ব্যবহার করতে হয়।