CSS মিডিয়া কোয়েরি কী?

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

টুল বর্ণনা

এই টুলটি আপনাকে জটিল সিনট্যাক্স মনে না রেখে CSS মিডিয়া কোয়েরি তৈরি করতে সাহায্য করে। কেবল আপনার লক্ষ্য মিডিয়া ধরন নির্বাচন করুন, মাত্রা নির্দিষ্ট করুন, ডিভাইস বৈশিষ্ট্য বেছে নিন এবং টুলটি আপনার স্টাইলশীটে ব্যবহারের জন্য প্রস্তুত সম্পূর্ণ @media নিয়ম তৈরি করে। এটি সমস্ত আধুনিক মিডিয়া কোয়েরি বৈশিষ্ট্য সমর্থন করে যার মধ্যে রয়েছে ভিউপোর্ট মাত্রা, স্ক্রিন অভিযোজন, দিক অনুপাত, রেজোলিউশন সনাক্তকরণ এবং রঙের স্কিম পছন্দ।

বৈশিষ্ট্যসমূহ

  • মিডিয়া ধরন নির্বাচন: সমস্ত, স্ক্রিন, প্রিন্ট বা স্পিচ মিডিয়া ধরনের মধ্যে বেছে নিন
  • মাত্রা নিয়ন্ত্রণ: যেকোনো CSS ইউনিট (px, em, rem, vw, ইত্যাদি) সহ ন্যূনতম এবং সর্বোচ্চ প্রস্থ/উচ্চতা সেট করুন
  • ডিভাইস বৈশিষ্ট্য: অভিযোজন, দিক অনুপাত, রেজোলিউশন এবং রঙের স্কিম পছন্দ কনফিগার করুন
  • কাস্টম শর্ত: হভার ক্ষমতা বা পয়েন্টার ধরনের মতো যেকোনো কাস্টম মিডিয়া বৈশিষ্ট্য যোগ করুন
  • যৌক্তিক অপারেটর: জটিল কোয়েরির জন্য AND, OR বা NOT অপারেটর ব্যবহার করে শর্তগুলি একত্রিত করুন
  • লাইভ প্রিভিউ: আপনি সেটিংস সামঞ্জস্য করার সাথে সাথে রিয়েল-টাইমে উত্পন্ন CSS কোড আপডেট দেখুন
  • সাধারণ ব্রেকপয়েন্ট রেফারেন্স: মোবাইল, ট্যাবলেট, ডেস্কটপ এবং বিশেষ বৈশিষ্ট্যগুলির জন্য মানক ব্রেকপয়েন্টগুলিতে দ্রুত অ্যাক্সেস

ব্যবহারের ক্ষেত্র

  • বিভিন্ন স্ক্রিন সাইজের সাথে খাপ খাইয়ে নেওয়া প্রতিক্রিয়াশীল লেআউট তৈরি করা
  • ট্যাবলেট বা স্মার্টফোনের মতো নির্দিষ্ট ডিভাইসগুলিকে লক্ষ্য করা
  • ডার্ক মোড এবং লাইট মোড থিম প্রয়োগ করা
  • প্রিন্ট স্টাইলশীট অপ্টিমাইজ করা
  • উচ্চ-রেজোলিউশন (রেটিনা) ডিসপ্লে সনাক্ত করা
  • ডিভাইস অভিযোজনের উপর ভিত্তি করে লেআউট সামঞ্জস্য করা
  • মোবাইল-প্রথম বা ডেস্কটপ-প্রথম প্রতিক্রিয়াশীল ডিজাইন তৈরি করা
  • CSS মিডিয়া কোয়েরি সিনট্যাক্স পরীক্ষা এবং শেখা