Media Queries এবং Breakpoints সেট করা

Ember.js একটি শক্তিশালী জাভাস্ক্রিপ্ট ফ্রেমওয়ার্ক, যা এক পেজ অ্যাপ্লিকেশন (SPA) তৈরি করতে ব্যবহৃত হয়। যদিও Ember.js নিজে কোনো CSS বা UI ফিচার সরবরাহ করে না, তবে এটি সহজে CSS বা স্টাইল শিট পরিচালনা করতে সহায়ক। Media Queries এবং Breakpoints একটি আধুনিক ওয়েব অ্যাপ্লিকেশনে বিভিন্ন স্ক্রীন সাইজ এবং ডিভাইসের জন্য ডিজাইন কাস্টমাইজ করতে ব্যবহৃত হয়। আপনি যদি Ember.js অ্যাপ্লিকেশনে Media Queries এবং Breakpoints সেট করতে চান, তবে এটি CSS বা SCSS এর মাধ্যমে করা যেতে পারে।

এখানে Ember.js-এ Media Queries এবং Breakpoints সেট করার পদ্ধতি ব্যাখ্যা করা হয়েছে।

Media Queries কী?

Media Queries CSS এর একটি ফিচার যা বিভিন্ন ডিভাইসের স্ক্রীন সাইজ এবং বৈশিষ্ট্যের ভিত্তিতে স্টাইল অ্যাপ্লাই করতে ব্যবহৃত হয়। এটি প্রধানত responsive design তৈরি করার জন্য ব্যবহৃত হয়, যাতে একটি ওয়েব পৃষ্ঠা বা অ্যাপ্লিকেশন বিভিন্ন স্ক্রীন সাইজে সঠিকভাবে রেন্ডার হয়।

Media Queries এর সাধারণ কাঠামো

@media screen and (max-width: 600px) {
  /* এই স্টাইল শুধুমাত্র 600px বা তার কম প্রস্থের স্ক্রীন সাইজে প্রযোজ্য */
  body {
    background-color: lightblue;
  }
}

এখানে, @media এর মাধ্যমে নির্দিষ্ট প্রস্থের স্ক্রীন সাইজ অনুযায়ী স্টাইল প্রয়োগ করা হয়েছে। যখন স্ক্রীনের প্রস্থ 600px বা তার কম হয়, তখন background-color: lightblue; স্টাইলটি প্রযোজ্য হবে।

Ember.js-এ Media Queries এবং Breakpoints ব্যবহারের পদ্ধতি

১. SCSS অথবা CSS ফাইলের মাধ্যমে Media Queries ব্যবহার করা

Ember.js অ্যাপ্লিকেশনে SCSS বা CSS ফাইল ব্যবহার করে Media Queries সেট করা যেতে পারে। প্রথমত, আপনার প্রজেক্টে SCSS (যদি ব্যবহার করেন) সক্রিয় করা থাকে, তবে app/styles/app.scss ফাইল ব্যবহার করতে পারেন।

app/styles/app.scss ফাইলে Media Queries যুক্ত করা

/* app/styles/app.scss */

/* ডিফল্ট স্টাইল */
body {
  font-family: Arial, sans-serif;
  background-color: white;
}

/* 600px বা তার কম প্রস্থের স্ক্রীনের জন্য */
@media screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }

  .header {
    font-size: 14px;
  }
}

/* 768px বা তার কম প্রস্থের স্ক্রীনের জন্য */
@media screen and (max-width: 768px) {
  .header {
    font-size: 18px;
  }
}

এখানে দুটি Media Queries যুক্ত করা হয়েছে: একটি 600px এবং আরেকটি 768px ব্রেকপয়েন্টের জন্য। প্রতিটি ব্রেকপয়েন্টে নির্দিষ্ট স্টাইল পরিবর্তিত হচ্ছে।

২. CSS এবং SCSS ফাইলের মাধ্যমে ডিভাইস ব্রেকপয়েন্ট কাস্টমাইজেশন

এছাড়াও আপনি একাধিক brakepoint কাস্টমাইজ করে বিভিন্ন স্ক্রীন সাইজের জন্য আলাদা আলাদা স্টাইল অ্যাপ্লাই করতে পারেন।

/* app/styles/app.scss */

/* ব্রেকপয়েন্ট ভ্যারিয়েবলগুলি */
$mobile: 600px;
$tablet: 768px;
$desktop: 1024px;

/* স্টাইল */
@media screen and (max-width: $mobile) {
  body {
    background-color: lightgray;
  }
}

@media screen and (max-width: $tablet) {
  .header {
    font-size: 20px;
  }
}

@media screen and (max-width: $desktop) {
  .header {
    font-size: 24px;
  }
}

এখানে, SCSS Variables ব্যবহার করা হয়েছে ব্রেকপয়েন্টগুলো আরও নিয়ন্ত্রণযোগ্য এবং সহজ করার জন্য। এটি স্কেলেবিলিটি বৃদ্ধি করে এবং আপনার স্টাইল শিটটিকে আরও পঠনযোগ্য করে তোলে।

৩. Ember.js-এ মিডিয়া কুয়েরি নিয়ন্ত্রণ করতে জাভাস্ক্রিপ্ট ব্যবহার করা

আপনি যদি JavaScript (বা Ember.js এর সাথে) মিডিয়া কুয়েরি ব্যবস্থাপনা করতে চান, তবে matchMedia API ব্যবহার করে স্ক্রীন সাইজের পরিবর্তন অনুযায়ী আচরণ পরিচালনা করতে পারেন। উদাহরণস্বরূপ:

// app/components/responsive-header.js
import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';

export default class ResponsiveHeaderComponent extends Component {
  @tracked isMobile = false;

  constructor() {
    super(...arguments);

    // মিডিয়া কুয়েরি চেক করা
    const mediaQueryList = window.matchMedia('(max-width: 768px)');
    mediaQueryList.addEventListener('change', this.updateMobileState);
    this.updateMobileState(mediaQueryList);
  }

  updateMobileState(event) {
    this.isMobile = event.matches;
  }
}

এখানে matchMedia ব্যবহার করা হয়েছে স্ক্রীনের সাইজ 768px-এর কম হলে isMobile প্রপার্টি পরিবর্তন করতে। এই প্রপার্টি টেমপ্লেটে ইউজার ইন্টারফেস কাস্টমাইজ করার জন্য ব্যবহৃত হতে পারে।

টেমপ্লেট উদাহরণ:

<!-- app/templates/components/responsive-header.hbs -->
{{#if this.isMobile}}
  <p>Mobile view</p>
{{else}}
  <p>Desktop view</p>
{{/if}}

এটি স্ক্রীনের সাইজ অনুযায়ী ডিভাইসে একটি ভিন্ন ভিউ প্রদর্শন করবে।

৪. Ember.js-এ CSS-in-JS (Ember Styled Components)

Ember.js-এ আপনি Styled Components ব্যবহার করে CSS-in-JS প্যাটার্নও প্রয়োগ করতে পারেন। এখানে ember-css-modules বা ember-styled-components ব্যবহার করে মিডিয়া কুয়েরি এবং ব্রেকপয়েন্ট সেট করা যেতে পারে।

ember-styled-components ব্যবহার:

ember install ember-styled-components

// app/components/my-button.js
import Component from '@glimmer/component';
import styled from 'ember-styled-components';

const StyledButton = styled('button')`
  background-color: blue;
  color: white;

  @media (max-width: 768px) {
    background-color: green;
  }
`;

export default class MyButtonComponent extends Component {
  // এই কম্পোনেন্টে StyledButton ব্যবহার করতে পারবেন
}

এখানে styled ব্যবহার করে button কম্পোনেন্টটি তৈরি করা হয়েছে, যা 768px স্ক্রীন সাইজের কম হলে ব্যাকগ্রাউন্ড কালার পরিবর্তন করবে।

Ember.js-এ Media Queries এবং Breakpoints ব্যবহারের মাধ্যমে আপনি বিভিন্ন ডিভাইস এবং স্ক্রীন সাইজে অ্যাপ্লিকেশনের ডিজাইন কাস্টমাইজ করতে পারেন। আপনি SCSS বা CSS ফাইলের মাধ্যমে সহজেই ব্রেকপয়েন্ট সেট করতে পারেন এবং JavaScript বা Ember.js ব্যবহার করে media queries এর কার্যকলাপ এবং স্টেট নিয়ন্ত্রণ করতে পারেন। এই পদ্ধতিগুলি responsive design তৈরি করতে সহায়ক এবং ব্যবহারকারীর অভিজ্ঞতা উন্নত করে।