CSS মিডিয়া কোয়ারি - উদাহরণ

CSS মিডিয়া কোয়ারি - আরও উদাহরণ

আমরা মিডিয়া কোয়ারির আরও উদাহরণ দেখুন。

মিডিয়া কোয়ারি হলো একটি জনপ্রিয় প্রযুক্তি, যা সাজানো স্টাইলশিটকে বিভিন্ন ডিভাইসে পাঠাতে ব্যবহৃত হয়。

নিচে একটি সহজ উদাহরণ দেখানো হলো, আমরা আমাদের

CSS মিডিয়া কোয়াইজ

উদাহরণ

/* বডির পিছনভূমির রঙ হলো ট্যান */
body {
  background-color: tan;
}
/* 992 পিক্সেল বা এর কম সময়ের স্ক্রিনে, পিছনভূমির রঙ হলো ব্লু */
@media screen and (max-width: 992px) {
  body {
    background-color: blue;
  }
}
/* 600 পিক্সেল বা এর কম সময়ের স্ক্রিনে, পিছনভূমির রঙ হলো ওলিভ */
@media screen and (max-width: 600px) {
  body {
    background-color: olive;
  }
}

স্বয়ংক্রিয়ভাবে চেষ্টা করুন

আপনি কি আমরা কেন 992px এবং 600px-এর বিষয়ে সত্যিই ব্যবহার করি জানতে চান? তারা আমরা আমাদের রেসপনসিভ ওয়েব ডিজাইন টিউটোরিয়াল আপনি কি সাধারণ বিন্দুকে জানতে চান? তারা আমরা আমাদের ডিভাইসের 'সাধারণ বিন্দু' বলে মনে করি। আপনি আমাদের

মেনুর মিডিয়া কোয়েরি

এই উদাহরণে, আমরা মিডিয়া কোয়েরি ব্যবহার করে প্রতিক্রিয় নেভিগেশন মেনু তৈরি করেছি যা বিভিন্ন স্ক্রিন মাপের উপর ভিন্ন হয়。

বড় স্ক্রিন:

ছোট স্ক্রিন:

উদাহরণ

/* navbar কনটেনার */
.topnav {
  overflow: hidden;
  background-color: #333;
}
/* Navbar লিঙ্ক */
.topnav a {
  float: left;
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
/* 600 পিক্সেল বা তার কম প্রস্থে, নেভিগেশন লিঙ্কগুলোকে পারালোক করে, নয় তবে স্ট্যাকড করে */
@media screen and (max-width: 600px) {
  .topnav a {
    float: none;
    width: 100%;
  }
}

স্বয়ংক্রিয়ভাবে চেষ্টা করুন

কলমের মিডিয়া কোয়েরি

মিডিয়া কোয়েরির সাধারণ ব্যবহার হল ফ্লেক্সিবল লেআউট তৈরি করা। এই উদাহরণে, আমরা একটি লেআউট তৈরি করেছি যা চারটি, দুটি এবং সম্পূর্ণ প্রস্থের কলমের মধ্যে পরিবর্তিত হয়, যা বিভিন্ন স্ক্রিন মাপ অনুযায়ী হয়:

বড় স্ক্রিন:

মাঝস্থ স্ক্রিন:

ছোট স্ক্রিন:

উদাহরণ

/* চারটি একইভাবে ফ্লোটিং করা কলম তৈরি করুন */
.column {
  float: left;
  width: 25%;
}
/* 992px বা তার কম প্রস্থে, চারটি কলম থেকে দুটি কলমে রূপান্তরিত হয় */
@media screen and (max-width: 992px) {
  .column {
    width: 50%;
  }
}
/* 600 পিক্সেল বা তার কম চেয়ে বেশি প্রস্থে, কলমগুলোকে স্ট্যাকড করে, নয় তবে পারালোক করে */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

স্বয়ংক্রিয়ভাবে চেষ্টা করুন

সুঝাওয়া:আরও আধুনিক কলম লেআউট তৈরির পদ্ধতি হল CSS Flexbox (নিচের উদাহরণ দেখুন)। কিন্তু, Internet Explorer 10 এবং তার পূর্ববর্তী সংস্করণগুলো তা সমর্থন করে না। IE6-10 এর সমর্থন চাইলে, ফ্লোটিং (উপরের চিত্রে দেখা যায়) ব্যবহার করুন。

ফ্লেক্স বক্স লেআউট মডিউলের বিষয়ে আরও জানতে চান, তবে CSS Flexbox এই চাপ্তীটিকে পড়ুন।

যদি প্রতিক্রিয় ওয়েব ডিজাইনের বিষয়ে আরও জানতে চান, আমাদের রেসপনসিভ ওয়েব ডিজাইন টিউটোরিয়াল。

উদাহরণ

/* ফ্লেক্স বক্স কনটেনার */
.row {
  display: flex;
  flex-wrap: wrap;
}
/* চারটি সমান কলম তৈরি করুন */
.column {
  flex: 25%;
  padding: 20px;
}
/* 992px বা তার কম প্রস্থে, চারটি কলম থেকে দুটি কলমে রূপান্তরিত হয় */
@media screen and (max-width: 992px) {
  .column {
    flex: 50%;
  }
}
/* 600 পিক্সেল বা তার কম চেয়ে বেশি প্রস্থে, কলমগুলোকে স্ট্যাকড করে, নয় তবে পারালোক করে */
@media screen and (max-width: 600px) {
  .row {
    flex-direction: column;
  }
}

স্বয়ংক্রিয়ভাবে চেষ্টা করুন

মিডিয়া কোয়েরি দিয়ে উপাদানগুলোকে লুকানো

মিডিয়া কোয়েরির আরেকটি সাধারণ ব্যবহার হল বিভিন্ন স্ক্রিন মাপের উপর উপাদানগুলোকে লুকানো:

在小屏幕上我会隐藏。

উদাহরণ

/* 如果屏幕尺寸为600像素或更小，请隐藏该元素 */
@media screen and (max-width: 600px) {
  div.example {
    display: none;
  }
}

স্বয়ংক্রিয়ভাবে চেষ্টা করুন

用媒体查询改变字体

您还可以使用媒体查询来更改不同屏幕尺寸上的元素的字体大小：

可变的字体大小。

উদাহরণ

/* 如果屏幕尺寸超过 600 像素，把 
 的字体大小设置为 80 像素 */
@media screen and (min-width: 600px) {
  div.example {
    font-size: 80px;
  }
}
/* 如果屏幕大小为 600px 或更小，把 
 的字体大小设置为 30px */
@media screen and (max-width: 600px) {
  div.example {
    font-size: 30px;
  }
}

স্বয়ংক্রিয়ভাবে চেষ্টা করুন

弹性图片库

在此例中，我们将媒体查询与 flexbox 一起使用来创建响应式图片库：

উদাহরণ

স্বয়ংক্রিয়ভাবে চেষ্টা করুন

弹性网站

在本例中，我们将媒体查询与 flexbox 一起使用，以创建响应式网站，其中包含弹性导航栏和弹性内容。

উদাহরণ

স্বয়ংক্রিয়ভাবে চেষ্টা করুন

方向：人像 / 风景

媒体查询还可以用于根据浏览器的方向更改页面的布局。

আপনি একটি সমস্ত সিএসএস প্রতিভা নির্ধারণ করতে পারেন যা শুধুমাত্র ব্রাউজার উইন্ডোর প্রস্থান বেশি হলেই প্রয়োগ হয়, যাকে ল্যান্ডস্কেপ বলা হয়:

উদাহরণ

যদি দিশা ল্যান্ডস্কেপ মোডে থাকে, তবে হালকা ব্লু ব্যাকগ্রাউন্ড রঙ ব্যবহার করুন:

@media only screen and (orientation: landscape) {
  body {
    background-color: lightblue;
  }
}

স্বয়ংক্রিয়ভাবে চেষ্টা করুন

ন্যূনতম প্রস্থান থেকে মধ্যম প্রস্থান

আপনি max-width এবং min-width প্রতিভা দ্বারা ন্যূনতম এবং মধ্যম প্রস্থান নির্ধারণ করতে পারেন।

উদাহরণ হিসাবে, ব্রাউজারের প্রস্থান 600 থেকে 900 পিক্সেলের মধ্যে থাকলে, <div> ইলেকট্রনিকেন্ট এর আস্তিত্ব পরিবর্তন করুন:

উদাহরণ

@media screen and (max-width: 900px) and (min-width: 600px) {
  div.example {
    font-size: 50px;
    padding: 50px;
    border: 8px solid black;
    background: yellow;
  }
}

স্বয়ংক্রিয়ভাবে চেষ্টা করুন

অতিরিক্ত মিডিয়া কোয়াইয়ার ব্যবহার: নিচের উদাহরণে, আমরা কমা (অর ক্যালকুলেশন অপারেটরের সমান) দ্বারা অতিরিক্ত মিডিয়া কোয়াইয়ার যোগ করি যা পূর্ববর্তী মিডিয়া কোয়াইয়ারকে সমাপ্ত করে:

উদাহরণ

/* প্রস্থান 600 পিক্সেল থেকে 900 পিক্সেলের মধ্যে বা 1100 পিক্সেলের বেশি হলে - <div> এর আস্তিত্ব পরিবর্তন করুন */
@media screen and (max-width: 900px) and (min-width: 600px), (min-width: 1100px) {
  div.example {
    font-size: 50px;
    padding: 50px;
    border: 8px solid black;
    background: yellow;
  }
}

স্বয়ংক্রিয়ভাবে চেষ্টা করুন

CSS @media রেফারেন্স ম্যানুয়েল

সমস্ত মিডিয়া টাইপ এবং প্রকার/এক্সপ্রেসনের পূর্ণ সংক্ষিপ্তসূচী দেখুন CSS রেফারেন্স @media রুল。

সুঝাওয়া:রেসপনসিভ ওয়েব ডিজাইন (বিভিন্ন যন্ত্র এবং স্ক্রিনের জন্য) এবং মিডিয়া কোয়াইল ব্রেকপইন্ট ব্যবহার করে আরও বেশি জানতে আমাদের রেসপনসিভ ওয়েব ডিজাইন টিউটোরিয়াল。