টেলউইন্ডে ওভারস্ক্রোল সহ মিডিয়া প্রশ্ন এবং ব্রেকপয়েন্টগুলি কীভাবে প্রয়োগ করবেন?

এই কোডে:

• ' bg-slate-500 ” ব্যাকগ্রাউন্ডের রঙ ধূসরে সেট করে।
• ' টেক্সট-লাল-900 ” টেক্সট রঙ লাল করে পরিবর্তন করে।
• ' p-4 ” 4px এর একটি প্যাডিং যোগ করে।
• ' lg: p-8 ” বড় পর্দায় 8px এর একটি প্যাডিং যোগ করে।
• প্রাথমিক অবস্থান '

  ' ট্যাগ ' ব্যবহার করে মূল পৃষ্ঠার সাথে সম্পর্কিত সেট করা হয় আপেক্ষিক 'শ্রেণী।

• ' এমডি: পরম একটি মাঝারি আকারের স্ক্রিনে পাঠ্যের অবস্থান আপেক্ষিক থেকে পরম পরিবর্তন করুন।
• ' md: overscroll-contain ” নিশ্চিত করে যে স্ক্রীনটি মাঝারি আকারের হলে পুরো পৃষ্ঠাকে প্রভাবিত করার পরিবর্তে সেই উপাদানটির মধ্যে 'ওভারস্ক্রোল' আচরণটি রয়েছে।
• ' md:টেক্সট-এলজি ” একটি মাঝারি আকারের স্ক্রিনে পাঠ্যটিকে বড় করে তোলে।
• ' md:অনুবাদ-x-4 ' এবং ' md:অনুবাদ-y-4 'পাঠ্য সরান' 4px ” মাঝারি স্ক্রিনের আকারে নীচে এবং ডানদিকে।
• ' lg:overscroll-none ' সেট করে ' ওভারস্ক্রোল ” বড় আকারের স্ক্রিনে কোনোটির জন্য শ্রেণী সম্পত্তি।
• ' lg:text-xl ” একটি বড় আকারের স্ক্রিনের জন্য পাঠ্যের আকারকে অতিরিক্ত-বড়-এ পরিবর্তন করে।
• ' এলজি: স্ট্যাটিক ” একটি বড় আকারের স্ক্রীনের জন্য মূল পৃষ্ঠার সাপেক্ষে পাঠ্যের অবস্থানকে পরম থেকে স্ট্যাটিক পর্যন্ত পরিবর্তন করে
• ' lg:অনুবাদ-x-4 ' এবং ' lg:অনুবাদ-y-4 ” বড় স্ক্রিনের আকারে টেক্সট 4px নিচে এবং ডানদিকে সরান।

ধাপ 2: আউটপুট পূর্বরূপ দেখুন
এখন, উপরের HTML কোডটি কার্যকর করার মাধ্যমে তৈরি করা ওয়েব পৃষ্ঠাটির পূর্বরূপ দেখুন এবং দৃশ্যমান পরিবর্তনগুলি দেখতে HTML সাইটের পর্দার আকার পরিবর্তন করুন:

উপরের পর্দায়, ' ওভারস্ক্রোল ” আচরণ দৃশ্যমান এবং পর্দার আকার হ্রাস করে দেখা যায় যে এটিতে প্রয়োগ করা মিডিয়া প্রশ্নের দ্বারা পাঠ্যের আকার পরিবর্তন হয়।

উপসংহার

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