প্রতিক্রিয়াশীল নকশা

এই কোডল্যাবটি ডেভেলপিং প্রগ্রেসিভ ওয়েব অ্যাপস প্রশিক্ষণ কোর্সের অংশ, যা Google বিকাশকারী প্রশিক্ষণ দল দ্বারা তৈরি করা হয়েছে। আপনি যদি ক্রমানুসারে কোডল্যাবগুলির মাধ্যমে কাজ করেন তবে আপনি এই কোর্সের সর্বাধিক মূল্য পাবেন।

কোর্স সম্পর্কে সম্পূর্ণ বিশদ বিবরণের জন্য, ডেভেলপিং প্রগ্রেসিভ ওয়েব অ্যাপস ওভারভিউ দেখুন ।

ভূমিকা

এই ল্যাবটি আপনাকে দেখায় কিভাবে আপনার ওয়েবসাইটের বিষয়বস্তুকে প্রতিক্রিয়াশীল করতে স্টাইল করতে হয়।

আপনি কি শিখবেন

  • আপনার অ্যাপটি কীভাবে স্টাইল করবেন যাতে এটি একাধিক ফর্ম ফ্যাক্টরগুলিতে ভালভাবে কাজ করে
  • আপনার সামগ্রীকে কলামে সহজে সংগঠিত করতে কীভাবে ফ্লেক্সবক্স ব্যবহার করবেন
  • স্ক্রীনের আকারের উপর ভিত্তি করে আপনার বিষয়বস্তু পুনর্গঠিত করতে মিডিয়া প্রশ্নগুলি কীভাবে ব্যবহার করবেন

আপনি কি জানতে হবে

  • বেসিক HTML এবং CSS

আপনি কি প্রয়োজন হবে

  • টার্মিনাল/শেল অ্যাক্সেস সহ কম্পিউটার
  • ইন্টারনেটের সাথে সংযোগ
  • পাঠ্য সম্পাদক

github থেকে pwa-training-labs সংগ্রহস্থল ডাউনলোড বা ক্লোন করুন এবং প্রয়োজনে Node.js-এর LTS সংস্করণ ইনস্টল করুন।

আপনার যদি পছন্দের স্থানীয় ডেভেলপমেন্ট সার্ভার না থাকে, তাহলে Node.js http-server প্যাকেজটি ইনস্টল করুন:

npm install http-server -g

responsive-design-lab/app/ ডিরেক্টরিতে নেভিগেট করুন এবং সার্ভারটি শুরু করুন:

cd responsive-design-lab/app
http-server -p 8080 -a localhost -c 0

আপনি যেকোন সময় Ctrl-c দিয়ে সার্ভার বন্ধ করতে পারেন।

আপনার ব্রাউজার খুলুন এবং localhost:8080/ ।

দ্রষ্টব্য: যেকোনো পরিষেবা কর্মীদের নিবন্ধনমুক্ত করুন এবং লোকালহোস্টের জন্য সমস্ত পরিষেবা কর্মী ক্যাশে সাফ করুন যাতে তারা ল্যাবে হস্তক্ষেপ না করে। Chrome DevTools-এ, আপনি অ্যাপ্লিকেশন ট্যাবের ক্লিয়ার স্টোরেজ বিভাগ থেকে সাইট ডেটা সাফ করুন ক্লিক করে এটি অর্জন করতে পারেন।

আপনার যদি একটি পাঠ্য সম্পাদক থাকে যা আপনাকে একটি প্রকল্প খুলতে দেয়, responsive-design-lab/app/ ফোল্ডারটি খুলুন। এতে সংগঠিত থাকা সহজ হবে। অন্যথায়, আপনার কম্পিউটারের ফাইল সিস্টেমে ফোল্ডারটি খুলুন। app/ ফোল্ডারটি হল যেখানে আপনি ল্যাব তৈরি করবেন।

এই ফোল্ডারে রয়েছে:

  • index.html হল আমাদের নমুনা সাইট/অ্যাপ্লিকেশনের প্রধান HTML পৃষ্ঠা
  • modernizr-custom.js হল একটি বৈশিষ্ট্য সনাক্তকরণ সরঞ্জাম যা ফ্লেক্সবক্স সমর্থনের জন্য পরীক্ষা সহজ করে
  • styles/main.css হল নমুনা সাইটের ক্যাসকেডিং স্টাইল শীট

ব্রাউজারে অ্যাপটিতে ফিরে যান। উইন্ডোর প্রস্থ 500px এর নিচে সঙ্কুচিত করার চেষ্টা করুন এবং লক্ষ্য করুন যে বিষয়বস্তুটি ভালভাবে সাড়া দিচ্ছে না।

বিকাশকারী সরঞ্জামগুলি খুলুন এবং আপনার ব্রাউজারে ডিভাইস মোড সক্ষম করুন৷ এই মোডটি একটি মোবাইল ডিভাইসে আপনার অ্যাপের আচরণ অনুকরণ করে। লক্ষ্য করুন যে পৃষ্ঠাটি স্ক্রিনে নির্দিষ্ট-প্রস্থের সামগ্রীর সাথে মানানসই করার জন্য জুম আউট করা হয়েছে। এটি একটি ভাল অভিজ্ঞতা নয় কারণ বেশিরভাগ ব্যবহারকারীর জন্য বিষয়বস্তু সম্ভবত খুব ছোট হবে, তাদের জুম এবং প্যান করতে বাধ্য করবে৷

TODO 3 index.html এ নিম্নলিখিত ট্যাগ দিয়ে প্রতিস্থাপন করুন:

<meta name="viewport" content="width=device-width, initial-scale=1">

ফাইলটি সংরক্ষণ করুন। ব্রাউজারে পৃষ্ঠাটি রিফ্রেশ করুন এবং ডিভাইস মোডে পৃষ্ঠাটি পরীক্ষা করুন৷ লক্ষ্য করুন পৃষ্ঠাটি আর জুম আউট করা হয়নি এবং বিষয়বস্তুর স্কেল ডেস্কটপ ডিভাইসের স্কেলের সাথে মেলে। যদি সামগ্রীটি ডিভাইস এমুলেটরে অপ্রত্যাশিতভাবে আচরণ করে, তবে এটি পুনরায় সেট করতে ডিভাইস মোডের মধ্যে এবং বাইরে টগল করুন।

দ্রষ্টব্য: ডিভাইস এমুলেশন আপনাকে মোবাইল ডিভাইসে আপনার সাইটটি কেমন দেখাবে তার একটি ঘনিষ্ঠ আনুমানিকতা দেয়, কিন্তু সম্পূর্ণ ছবি পেতে আপনাকে সর্বদা বাস্তব ডিভাইসে আপনার সাইট পরীক্ষা করা উচিত। আপনি Chrome এবং Firefox- এ অ্যান্ড্রয়েড ডিভাইস ডিবাগ করার বিষয়ে আরও জানতে পারেন।

ব্যাখ্যা

একটি মেটা ভিউপোর্ট ট্যাগ ব্রাউজারকে কীভাবে পৃষ্ঠার মাত্রা এবং স্কেলিং নিয়ন্ত্রণ করতে হয় তার নির্দেশনা দেয়। width বৈশিষ্ট্য ভিউপোর্টের আকার নিয়ন্ত্রণ করে। এটি একটি নির্দিষ্ট সংখ্যক পিক্সেল (উদাহরণস্বরূপ, width=500 ) বা বিশেষ মান device-width, যা 100% স্কেলে CSS পিক্সেলে স্ক্রিনের প্রস্থ। (সম্পর্কিত height এবং device-height মান রয়েছে, যা ভিউপোর্টের উচ্চতার উপর ভিত্তি করে আকার বা অবস্থান পরিবর্তন করে এমন উপাদান সহ পৃষ্ঠাগুলির জন্য উপযোগী হতে পারে।)

প্রারম্ভিক-স্কেল সম্পত্তি জুম স্তর নিয়ন্ত্রণ করে যখন পৃষ্ঠাটি প্রথম লোড করা হয়। প্রাথমিক স্কেল সেট করা অভিজ্ঞতার উন্নতি করে, কিন্তু বিষয়বস্তু এখনও স্ক্রিনের প্রান্ত অতিক্রম করে। আমরা পরবর্তী ধাপে এটি ঠিক করব।

আরো তথ্যের জন্য

TODO 4 কে নিচের কোড দিয়ে styles/main.css এ প্রতিস্থাপন করুন:

@media screen and (max-width: 48rem) {
  .container .col {
    width: 95%;
  }
}

ফাইলটি সংরক্ষণ করুন। ব্রাউজারে ডিভাইস মোড অক্ষম করুন এবং পৃষ্ঠাটি রিফ্রেশ করুন। জানালার প্রস্থ সঙ্কুচিত করার চেষ্টা করুন। লক্ষ্য করুন যে বিষয়বস্তু নির্দিষ্ট প্রস্থে একটি একক কলাম বিন্যাসে স্যুইচ করে। ডিভাইস মোড পুনরায় সক্ষম করুন এবং পর্যবেক্ষণ করুন যে সামগ্রীটি ডিভাইসের প্রস্থের সাথে মানানসই সাড়া দেয়৷

ব্যাখ্যা

টেক্সটটি পঠনযোগ্য কিনা তা নিশ্চিত করতে আমরা একটি মিডিয়া কোয়েরি ব্যবহার করি যখন ব্রাউজারের প্রস্থ 48rem হয়ে যায় (ব্রাউজারের ডিফল্ট ফন্টের আকারে 768 পিক্সেল বা ব্যবহারকারীর ব্রাউজারে ডিফল্ট ফন্টের আকারের 48 গুণ)। আপেক্ষিক ইউনিটগুলির জন্য কেন rem একটি ভাল পছন্দ তার একটি ভাল ব্যাখ্যার জন্য কখন Em বনাম রেম ব্যবহার করবেন দেখুন। যখন মিডিয়া ক্যোয়ারী ট্রিগার হয় তখন আমরা পৃষ্ঠাটি পূরণ করার জন্য তিনটি div প্রতিটির width পরিবর্তন করে তিনটি কলাম থেকে একটি কলামে লেআউট পরিবর্তন করি।

নমনীয় বক্স লেআউট মডিউল (ফ্লেক্সবক্স) আপনার বিষয়বস্তুকে প্রতিক্রিয়াশীল করার জন্য একটি দরকারী এবং সহজেই ব্যবহারযোগ্য টুল। ফ্লেক্সবক্স আমাদের পূর্ববর্তী ধাপগুলির মতো একই ফলাফল অর্জন করতে দেয়, তবে এটি আমাদের জন্য যেকোন ব্যবধানের গণনার যত্ন নেয় এবং কন্টেন্ট গঠনের জন্য ব্যবহার করার জন্য প্রস্তুত CSS বৈশিষ্ট্যগুলির একটি গুচ্ছ প্রদান করে।

CSS-এ বিদ্যমান নিয়মগুলি মন্তব্য করুন

styles/main.css এ সমস্ত নিয়মগুলি /* এবং */ এ মোড়ানোর মাধ্যমে মন্তব্য করুন। যখন ফ্লেক্সবক্স প্রগতিশীল বর্ধিতকরণ বিভাগে ফ্লেক্সবক্স সমর্থিত নয় তখন আমরা এইগুলি আমাদের ফলব্যাক নিয়মগুলি তৈরি করব৷

ফ্লেক্সবক্স লেআউট যোগ করুন

TODO 5.2 কে styles/main.css এ নিম্নলিখিত কোড দিয়ে প্রতিস্থাপন করুন:

.container {
  display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6 */
  display: -ms-flexbox;  /* TWEENER - IE 10 */
  display: flex;         /* NEW, Spec - Firefox, Chrome, Opera */
  background: #eee;  
  overflow: auto;
}

.container .col {
  flex: 1;
  padding: 1rem;
}

কোড সংরক্ষণ করুন এবং আপনার ব্রাউজারে index.html রিফ্রেশ করুন। ব্রাউজারে ডিভাইস মোড অক্ষম করুন এবং পৃষ্ঠাটি রিফ্রেশ করুন। আপনি যদি আপনার ব্রাউজার উইন্ডোকে আরও সংকীর্ণ করেন, তাহলে কলামগুলি আরও পাতলা হবে যতক্ষণ না শুধুমাত্র একটি দৃশ্যমান থাকে৷ আমরা পরবর্তী অনুশীলনে মিডিয়া প্রশ্নের সাথে এটি ঠিক করব।

ব্যাখ্যা

প্রথম নিয়ম container div ফ্লেক্স ধারক হিসাবে সংজ্ঞায়িত করে। এটি তার সমস্ত সরাসরি শিশুদের জন্য একটি ফ্লেক্স প্রসঙ্গ সক্ষম করে। আমরা বৃহত্তর সমর্থন পেতে ফ্লেক্সবক্স অন্তর্ভুক্ত করার জন্য পুরানো এবং নতুন সিনট্যাক্স মিশ্রিত করছি (বিশদ বিবরণের জন্য আরও তথ্যের জন্য দেখুন)।

দ্বিতীয় নিয়মটি আমাদের সমান প্রস্থের ফ্লেক্স শিশু তৈরি করতে .col ক্লাস ব্যবহার করে। flex প্রপার্টির প্রথম আর্গুমেন্টকে 1 এ সেট করা সমস্ত div এর জন্য ক্লাস col সহ বাকি স্থানটিকে তাদের মধ্যে সমানভাবে ভাগ করে। আপেক্ষিক প্রস্থ গণনা করা এবং সেট করার চেয়ে এটি আরও সুবিধাজনক।

আরো তথ্যের জন্য

ঐচ্ছিক: বিভিন্ন আপেক্ষিক প্রস্থ সেট করুন

প্রথম দুটি কলামের আপেক্ষিক প্রস্থ 1 এবং তৃতীয়টিতে 1.5 সেট করতে nth-child pseudo-class ব্যবহার করুন৷ প্রতিটি কলামের জন্য আপেক্ষিক প্রস্থ সেট করতে আপনাকে অবশ্যই flex সম্পত্তি ব্যবহার করতে হবে। উদাহরণস্বরূপ, প্রথম কলামের জন্য নির্বাচক এই মত দেখতে হবে:

.container .col:nth-child(1)

Flexbox এর সাথে মিডিয়া প্রশ্ন ব্যবহার করুন

TODO 5.4 কে নিচের কোড দিয়ে styles/main.css এ প্রতিস্থাপন করুন:

@media screen and (max-width: 48rem) {
  .container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-flow: column;
  }
}

কোড সংরক্ষণ করুন এবং আপনার ব্রাউজারে index.html রিফ্রেশ করুন। এখন আপনি যদি ব্রাউজারের প্রস্থ সঙ্কুচিত করেন, তাহলে বিষয়বস্তু একটি কলামে পুনর্গঠিত হবে।

ব্যাখ্যা

যখন মিডিয়া ক্যোয়ারী ট্রিগার হয় তখন আমরা flex-flow প্রপার্টি column সেট করে লেআউটটিকে তিন-কলাম থেকে এক-কলামে পরিবর্তন করি। এটি 5 ধাপে আমরা যে মিডিয়া ক্যোয়ারী যোগ করেছি তার মতোই ফলাফল অর্জন করে । ফ্লেক্সবক্স flex-flow মতো অনেক অন্যান্য বৈশিষ্ট্য প্রদান করে যা আপনাকে আপনার সামগ্রীকে সহজে গঠন, পুনঃক্রম এবং ন্যায্যতা দিতে দেয় যাতে এটি যেকোনো প্রসঙ্গে ভালোভাবে সাড়া দেয়।

যেহেতু ফ্লেক্সবক্স একটি অপেক্ষাকৃত নতুন প্রযুক্তি, তাই আমাদের সিএসএস-এ ফলব্যাক অন্তর্ভুক্ত করা উচিত।

Modernizr যোগ করুন

Modernizr হল একটি বৈশিষ্ট্য সনাক্তকরণ সরঞ্জাম যা ফ্লেক্সবক্স সমর্থনের জন্য পরীক্ষা সহজ করে।

কাস্টম Modernizr বিল্ড অন্তর্ভুক্ত করতে কোড দিয়ে index.html এ TODO 6.1 প্রতিস্থাপন করুন:

<script src="modernizr-custom.js"></script>

ব্যাখ্যা

আমরা index.html এর শীর্ষে একটি Modernizr বিল্ড অন্তর্ভুক্ত করি, যা ফ্লেক্সবক্স সমর্থনের জন্য পরীক্ষা করে। এটি পৃষ্ঠা-লোডের উপর পরীক্ষা চালায় এবং ব্রাউজারটি ফ্লেক্সবক্স সমর্থন করলে <html> উপাদানের সাথে ক্লাস flexbox যুক্ত করে। অন্যথায়, এটি <html> উপাদানটিতে একটি no-flexbox ক্লাস যুক্ত করে। পরবর্তী বিভাগে আমরা এই ক্লাসগুলি CSS-এ যুক্ত করব।

দ্রষ্টব্য: আমরা যদি ফ্লেক্সবক্সের flex-wrap প্রপার্টি ব্যবহার করতাম, তাহলে এই বৈশিষ্ট্যটির জন্য আমাদের একটি পৃথক Modernizr ডিটেক্টর যোগ করতে হবে। কিছু ব্রাউজারের পুরানো সংস্করণগুলি আংশিকভাবে Flexbox সমর্থন করে এবং এই বৈশিষ্ট্যটি অন্তর্ভুক্ত করে না।

ক্রমান্বয়ে ফ্লেক্সবক্স ব্যবহার করুন

ফ্লেক্সবক্স সমর্থিত না হলে ফলব্যাক নিয়ম প্রদান করতে CSS-এ flexbox এবং no-flexbox ক্লাস ব্যবহার করা যাক।

এখন styles/main.css এ, প্রতিটি নিয়মের সামনে .no-flexbox যোগ করুন যা আমরা মন্তব্য করেছি:

.no-flexbox .container {
  background: #eee;
  overflow: auto;
}

.no-flexbox .container .col {
    width: 27%;
    padding: 30px 3.15% 0;
    float: left;
}

@media screen and (max-width: 48rem) {
  .no-flexbox .container .col {
    width: 95%;
  }
}

একই ফাইলে, বাকি নিয়মের সামনে .flexbox যোগ করুন: 

.flexbox .container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background: #eee;
  overflow: auto;
}

.flexbox .container .col {
  flex: 1;
  padding: 1rem;
}

@media screen and (max-width: 48rem) {
    .flexbox .container {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        flex-flow: column;
    }
}

আপনি ঐচ্ছিক ধাপ 5.3 সম্পূর্ণ করলে পৃথক কলামের নিয়মে .flexbox যোগ করতে ভুলবেন না।

কোডটি সংরক্ষণ করুন এবং ব্রাউজারে index.html রিফ্রেশ করুন। পৃষ্ঠাটি আগের মতো দেখতে হবে, তবে এখন এটি যেকোনো ডিভাইসে যেকোনো ব্রাউজারে ভাল কাজ করে। আপনার যদি এমন একটি ব্রাউজার থাকে যা Flexbox সমর্থন করে না , আপনি সেই ব্রাউজারে index.html খুলে ফলব্যাক নিয়মগুলি পরীক্ষা করতে পারেন৷

আরো তথ্যের জন্য

আপনি আপনার বিষয়বস্তুকে প্রতিক্রিয়াশীল করতে স্টাইল করতে শিখেছেন। মিডিয়া ক্যোয়ারী ব্যবহার করে, আপনি ব্যবহারকারীর ডিভাইসের উইন্ডো বা পর্দার আকারের উপর ভিত্তি করে আপনার সামগ্রীর বিন্যাস পরিবর্তন করতে পারেন।

আমরা কভার করেছি কি

  • ভিজ্যুয়াল ভিউপোর্ট সেট করা হচ্ছে
  • ফ্লেক্সবক্স
  • মিডিয়া প্রশ্ন

সম্পদ

প্রতিক্রিয়াশীল ডিজাইনের মূল বিষয়গুলি সম্পর্কে আরও জানুন

একটি প্রগতিশীল বর্ধন হিসাবে ফ্লেক্সবক্স সম্পর্কে আরও জানুন

প্রতিক্রিয়াশীল CSS এর জন্য লাইব্রেরি সম্পর্কে জানুন

মিডিয়া ক্যোয়ারী ব্যবহার সম্পর্কে আরও জানুন

PWA প্রশিক্ষণ কোর্সের সমস্ত কোডল্যাব দেখতে, কোর্সের জন্য স্বাগতম কোডল্যাব দেখুন/