SNDP BAG 4 YOU
কম্পিউটার প্রোগ্রামিং শিখুন


CSS Media Queries

কোন ওয়েবসাইট কে Responsive করার জন্য css3 Media Queries ব্যবহার করতে হয়।

সিএসএস মিডিয়া প্রকার :

  1. All - নিচের সব গুলো ব্যবহার করার জন্য এই মিডিয়া ব্যবহার করা হয় ।
  2. print - প্রিন্ট পেজ ডিজাইন করার জন্য এই মিডিয়া ব্যবহার করা হয়।
  3. screen - ওয়েব পেজ ডিজাইন করার জন্য এই মিডিয়া ব্যবহার করা হয়।
  4. speech - পেজ রিডার এর জন্য এই মিডিয়া ব্যবহার করা হয়।

এখানে Screen Media নিয়ে আলোচনা করা হবে। এই মিডিয়া স্ক্রীন এর width এবং Height ভিউপোর্ট এর উপরে লেখা হয়। যেসমস্ত ডিভাইসের উপরে ওয়েবসাইট কে রেস্পন্সিভ করা হয় সে গুলোকে চারটি ভাগে ভাগ করা হয়। যেমন

  1. Extra Small Device - 0px থেকে 575px এর স্ক্রীন ডিভাইস গুলোকে এক্সট্রা স্মল ডিভাইস বলা হয়। যেমন - মোবাইল ।
  2. Small Device - 576px থেকে 767px এর স্ক্রীন ডিভাইস গুলোকে স্মল ডিভাইস বলা হয়। যেমন - ট্যাবলেট ।
  3. Medium Device - 768px থেকে 991px এর স্ক্রীন ডিভাইস গুলোকে মিডিয়াম ডিভাইস বলা হয়। যেমন - Ipad ।
  4. large Device - 992px থেকে 1199px এর স্ক্রীন ডিভাইস গুলোকে Large ডিভাইস বলা হয়। যেমন - small Monitor,Laptop.
  5. Extra Large Device - 1200px এর স্ক্রীন ডিভাইস গুলোকে এক্সট্রা Large ডিভাইস বলা হয়। যেমন - Large Tv or screen. ।

Media Queries লেখার সময় মনে রাখতে হবে নিচের কোডটি যেন head tag এর ভিতরে লেখা থাকে। নিচে থেকে কোডটি কপি করে নিন আর হেড সেক্সানে পেস্ট করুন।

তিন ভাবে Media Queries ব্যবহার করা হয় :

Media Queries লেখার জন্য প্রথমে @media() লিখতে হয় ।

প্রথম ব্যবহার :



দ্বিতীয় ব্যবহার :

তৃতীয় ব্যবহার :