ইন্টারনেটে মোবাইল ফোন ব্যবহারকারীর সংখ্যা বৃদ্ধির সাথে সাথে, ওয়েব ডিজাইনারদের জন্য বিভিন্ন স্ক্রিন আকারের জন্য উপযুক্ত উপায়ে কন্টেন্ট সাজানো ক্রমশ গুরুত্বপূর্ণ হয়ে উঠেছে। রেসপন্সিভ ওয়েব ডিজাইন, যা মূলত ইথান মার্কোট দ্বারা A List Apart- এ সংজ্ঞায়িত করা হয়েছিল, হল একটি ডিজাইন কৌশল যা ব্যবহারকারীদের চাহিদা এবং তাদের ডিভাইসের ক্ষমতার প্রতি সাড়া দেয়, ব্যবহৃত ডিভাইসের সাথে মানানসই সাইটের লেআউট পরিবর্তন করে। উদাহরণস্বরূপ, একটি রেসপন্সিভ সাইট ফোনে একটি একক-কলাম ভিউ, ট্যাবলেটে দুটি কলামে এবং ডেস্কটপ কম্পিউটারে তিন বা চারটি কলামে কন্টেন্ট দেখাতে পারে।
যেহেতু ইন্টারনেট-সক্ষম ডিভাইসগুলির স্ক্রিনের আকার অনেক বেশি হতে পারে, তাই আপনার সাইটের জন্য বিদ্যমান বা ভবিষ্যতের যেকোনো স্ক্রিনের আকারের সাথে খাপ খাইয়ে নেওয়া গুরুত্বপূর্ণ। আধুনিক প্রতিক্রিয়াশীল ডিজাইনে টাচ স্ক্রিনের মতো ইন্টারঅ্যাকশনের পদ্ধতিও অন্তর্ভুক্ত। লক্ষ্য হল সকলের জন্য অভিজ্ঞতা অপ্টিমাইজ করা।
ভিউপোর্ট সেট করুন
বিভিন্ন ডিভাইসের জন্য অপ্টিমাইজ করা পৃষ্ঠাগুলিতে ডকুমেন্টের মাথায় একটি মেটা ভিউপোর্ট ট্যাগ থাকা আবশ্যক। এই ট্যাগটি ব্রাউজারকে পৃষ্ঠার মাত্রা এবং স্কেলিং কীভাবে নিয়ন্ত্রণ করতে হয় তা বলে।
সর্বোত্তম অভিজ্ঞতা প্রদানের জন্য, মোবাইল ব্রাউজারগুলি পৃষ্ঠাটিকে ডেস্কটপ স্ক্রিন প্রস্থে (সাধারণত প্রায় 980px , যদিও এটি ডিভাইসভেদে পরিবর্তিত হয়) রেন্ডার করে এবং তারপর ফন্টের আকার বাড়িয়ে এবং স্ক্রিনের সাথে মানানসই কন্টেন্ট স্কেল করে কন্টেন্টটিকে আরও ভালো দেখানোর চেষ্টা করে। এর ফলে ফন্টগুলি অসঙ্গত দেখাতে পারে এবং ব্যবহারকারীদের কন্টেন্ট দেখতে এবং ইন্টারঅ্যাক্ট করার জন্য জুম ইন করতে হয়।
<!DOCTYPE html>
<html lang="en">
<head>
…
<meta name="viewport" content="width=device-width, initial-scale=1">
…
</head>
…
মেটা ভিউপোর্ট মান width=device-width ব্যবহার করে পৃষ্ঠাটিকে ডিভাইস-ইন্ডিপেন্ডেন্ট পিক্সেল (DIP) তে স্ক্রিনের প্রস্থের সাথে মিলিত হতে বলা হয়, যা একটি স্ট্যান্ডার্ড ভিজ্যুয়াল পিক্সেল ইউনিট (যা একটি উচ্চ-ঘনত্বের স্ক্রিনে অনেকগুলি ভৌত পিক্সেল দিয়ে তৈরি হতে পারে)। এটি পৃষ্ঠাটিকে বিভিন্ন স্ক্রিন আকারের সাথে মেলে কন্টেন্ট রিফ্লো করতে দেয়।
কিছু ব্রাউজার ল্যান্ডস্কেপ মোডে ঘোরানোর সময় পৃষ্ঠার প্রস্থ স্থির রাখে এবং রিফ্লো করার পরিবর্তে স্ক্রিনটি পূরণ করার জন্য জুম করে। initial-scale=1 মান যোগ করলে ব্রাউজারগুলিকে ডিভাইসের ওরিয়েন্টেশন নির্বিশেষে CSS পিক্সেল এবং ডিভাইস-স্বাধীন পিক্সেলের মধ্যে 1:1 সম্পর্ক সেট করতে বলা হয়, যার ফলে পৃষ্ঠাটি সম্পূর্ণ ল্যান্ডস্কেপ প্রস্থের সুবিধা নিতে পারে।
"Does not have a <meta name="viewport"> tag with width অথবা initial-scale Lighthouse audit" আপনার HTML ডকুমেন্টগুলি ভিউপোর্ট মেটা ট্যাগ সঠিকভাবে ব্যবহার করছে কিনা তা নিশ্চিত করার প্রক্রিয়াটি স্বয়ংক্রিয় করতে সাহায্য করতে পারে।
ভিউপোর্টের সাথে কন্টেন্টের আকার পরিবর্তন করুন
ডেস্কটপ এবং মোবাইল উভয় ডিভাইসেই, ব্যবহারকারীরা ওয়েবসাইটগুলি উল্লম্বভাবে স্ক্রোল করতে অভ্যস্ত কিন্তু অনুভূমিকভাবে নয়। ব্যবহারকারীকে অনুভূমিকভাবে স্ক্রোল করতে বা পুরো পৃষ্ঠাটি দেখতে জুম আউট করতে বাধ্য করার ফলে ব্যবহারকারীর অভিজ্ঞতা খারাপ হয়।
মেটা ভিউপোর্ট ট্যাগ ব্যবহার করে মোবাইল সাইট তৈরি করার সময়, ভুলবশত এমন পৃষ্ঠার কন্টেন্ট তৈরি হয়ে যাওয়া স্বাভাবিক যা নির্দিষ্ট ভিউপোর্টের মধ্যে পুরোপুরি ফিট করে না। উদাহরণস্বরূপ, ভিউপোর্টের চেয়ে চওড়া দেখানো একটি ছবি অনুভূমিক স্ক্রোলিংয়ের কারণ হতে পারে। এটি প্রতিরোধ করতে, আপনার কন্টেন্টকে ভিউপোর্টের ভিতরে ফিট করার জন্য সামঞ্জস্য করুন।
ভিউপোর্টের জন্য কন্টেন্টের আকার সঠিকভাবে নির্ধারণ করা হয়নি। লাইটহাউস অডিট আপনাকে উপচে পড়া কন্টেন্ট সনাক্ত করার প্রক্রিয়াটি স্বয়ংক্রিয় করতে সাহায্য করতে পারে।
ছবি
স্থির মাত্রার একটি ছবি যদি ভিউপোর্টের চেয়ে বড় হয়, তাহলে পৃষ্ঠাটি স্ক্রল করতে বাধ্য করে। আমরা সকল ছবির max-width 100% রাখার পরামর্শ দিচ্ছি, যা উপলব্ধ স্থানের সাথে মানানসই ছবিগুলিকে সঙ্কুচিত করে এবং প্রাথমিক আকারের বাইরে প্রসারিত হতে বাধা দেয়।
বেশিরভাগ ক্ষেত্রে, আপনি আপনার স্টাইল শীটে নিম্নলিখিতগুলি যোগ করে এটি করতে পারেন:
img {
max-width: 100%;
display: block;
}
img এলিমেন্টে ছবির মাত্রা যোগ করুন।
এমনকি যখন আপনি max-width: 100% সেট করেন, তখনও আমরা আপনার <img> ট্যাগে width এবং height অ্যাট্রিবিউট যোগ করার পরামর্শ দিই যাতে ব্রাউজার ছবি লোড হওয়ার আগে স্থান সংরক্ষণ করতে পারে। এটি লেআউট পরিবর্তন রোধ করতে সাহায্য করে।
লেআউট
যেহেতু CSS পিক্সেলে স্ক্রিনের মাত্রা এবং প্রস্থ ডিভাইসভেদে ব্যাপকভাবে পরিবর্তিত হয় (উদাহরণস্বরূপ, ফোন এবং ট্যাবলেটের মধ্যে, এমনকি বিভিন্ন ফোনের মধ্যেও), কন্টেন্ট ভালোভাবে রেন্ডার করার জন্য একটি নির্দিষ্ট ভিউপোর্ট প্রস্থের উপর নির্ভর করা উচিত নয়।
অতীতে, এর জন্য শতাংশের মধ্যে লেআউট উপাদান সেট করা প্রয়োজন ছিল। পিক্সেল পরিমাপ ব্যবহার করার জন্য ব্যবহারকারীকে ছোট স্ক্রিনে অনুভূমিকভাবে স্ক্রোল করতে হবে:
পরিবর্তে শতাংশ ব্যবহার করলে ছোট স্ক্রিনে কলামগুলি সংকুচিত হয়, কারণ প্রতিটি কলাম সর্বদা স্ক্রিনের প্রস্থের একই শতাংশ দখল করে:
আধুনিক CSS লেআউট কৌশল যেমন ফ্লেক্সবক্স, গ্রিড লেআউট এবং মাল্টিকল এই নমনীয় গ্রিডগুলি তৈরি করা অনেক সহজ করে তোলে।
ফ্লেক্সবক্স
যখন আপনার কাছে বিভিন্ন আকারের আইটেমের সেট থাকে এবং আপনি চান যে সেগুলি এক সারিতে বা একাধিক সারিতে আরামে ফিট হোক, তখন ফ্লেক্সবক্স ব্যবহার করুন, যেখানে ছোট আইটেমগুলি কম জায়গা নেয় এবং বড়গুলি বেশি জায়গা নেয়।
.items {
display: flex;
justify-content: space-between;
}
আপনি Flexbox ব্যবহার করে আইটেমগুলিকে একটি একক সারিতে প্রদর্শন করতে পারেন, অথবা উপলব্ধ স্থান হ্রাস পাওয়ার সাথে সাথে একাধিক সারিতে মুড়িয়ে রাখতে পারেন।
ফ্লেক্সবক্স সম্পর্কে আরও পড়ুন ।
সিএসএস গ্রিড লেআউট
CSS গ্রিড লেআউট নমনীয় গ্রিড তৈরি করে। আপনি গ্রিড লেআউট ব্যবহার করে এবং fr ইউনিট ব্যবহার করে পূর্ববর্তী ভাসমান উদাহরণটি উন্নত করতে পারেন, যা কন্টেইনারে উপলব্ধ স্থানের একটি অংশকে প্রতিনিধিত্ব করে।
.container {
display: grid;
grid-template-columns: 1fr 3fr;
}
আপনি গ্রিড ব্যবহার করে নিয়মিত গ্রিড লেআউট তৈরি করতে পারেন যাতে যতগুলি আইটেম ফিট করা যায়। স্ক্রিনের আকার হ্রাস পাওয়ার সাথে সাথে উপলব্ধ ট্র্যাকের সংখ্যা হ্রাস পায়। নিম্নলিখিত ডেমোতে প্রতিটি সারিতে যতগুলি কার্ড ফিট করা যায় তার একটি গ্রিড দেখানো হয়েছে, যার ন্যূনতম আকার 200px ।
সিএসএস গ্রিড লেআউট সম্পর্কে আরও পড়ুন
একাধিক-কলাম লেআউট
কিছু ধরণের লেআউটের জন্য, আপনি মাল্টিপল-কলাম লেআউট (মাল্টিকোল) ব্যবহার করতে পারেন, যা column-width বৈশিষ্ট্য ব্যবহার করে রেসপন্সিভ সংখ্যার কলামের তৈরি করে। নিম্নলিখিত ডেমোতে, যখন আরও 200px কলামের জন্য জায়গা থাকে তখন পৃষ্ঠাটি কলাম যুক্ত করে।
প্রতিক্রিয়াশীলতার জন্য CSS মিডিয়া কোয়েরি ব্যবহার করুন
কখনও কখনও আপনার লেআউটে পূর্বে বর্ণিত কৌশলগুলির চেয়ে নির্দিষ্ট স্ক্রিন আকার সমর্থন করার জন্য আরও ব্যাপক পরিবর্তন করার প্রয়োজন হতে পারে। এখানেই মিডিয়া কোয়েরিগুলি কার্যকর হয়ে ওঠে।
মিডিয়া কোয়েরি হল সহজ ফিল্টার যা আপনি CSS স্টাইলে প্রয়োগ করতে পারেন, যাতে কন্টেন্ট রেন্ডার করার ডিভাইসের ধরণের উপর ভিত্তি করে স্টাইলগুলি পরিবর্তন করা যায়। এগুলি ডিভাইসের বৈশিষ্ট্যগুলির উপর ভিত্তি করে স্টাইলিং পরিবর্তন করতে পারে যার মধ্যে রয়েছে প্রস্থ, উচ্চতা, ওরিয়েন্টেশন এবং ডিভাইসটি টাচস্ক্রিন হিসেবে ব্যবহার করা হচ্ছে কিনা।
মুদ্রণের জন্য বিভিন্ন স্টাইল প্রদান করতে, আপনি একটি আউটপুট টাইপ লক্ষ্য করতে পারেন এবং মুদ্রণ শৈলীর জন্য একটি স্টাইল শীট অন্তর্ভুক্ত করতে পারেন:
<!DOCTYPE html>
<html lang="en">
<head>
…
<link rel="stylesheet" href="print.css" media="print">
…
</head>
…
আপনার প্রধান স্টাইল শিটে প্রিন্ট স্টাইল অন্তর্ভুক্ত করার জন্য আপনি একটি মিডিয়া কোয়েরি ব্যবহার করতে পারেন:
@media print {
/* print styles go here */
}
রেসপন্সিভ ওয়েব ডিজাইনের ক্ষেত্রে, ডিভাইসের বৈশিষ্ট্যগুলি সম্পর্কে সবচেয়ে বেশি প্রশ্ন করা হয়, তাই আপনি টাচস্ক্রিন বা ছোট স্ক্রিনের জন্য আপনার লেআউটটি কাস্টমাইজ করতে পারেন।
ভিউপোর্টের আকারের উপর ভিত্তি করে মিডিয়া কোয়েরি
মিডিয়া কোয়েরি আপনাকে একটি প্রতিক্রিয়াশীল অভিজ্ঞতা তৈরি করতে দেয় যা নির্দিষ্ট স্ক্রিন আকারের জন্য নির্দিষ্ট স্টাইল প্রয়োগ করে। স্ক্রিন আকারের কোয়েরিগুলি নিম্নলিখিত বিষয়গুলির জন্য পরীক্ষা করতে পারে:
-
width(min-width,max-width) -
height(min-height,max-height) -
orientation -
aspect-ratio
ডিভাইসের ক্ষমতার উপর ভিত্তি করে মিডিয়া কোয়েরি
উপলব্ধ ডিভাইসের পরিসর বিবেচনা করে, ডেভেলপাররা ধরে নিতে পারে না যে প্রতিটি বড় ডিভাইস একটি নিয়মিত ডেস্কটপ বা ল্যাপটপ কম্পিউটার, অথবা প্রতিটি ছোট ডিভাইস একটি টাচস্ক্রিন ব্যবহার করে। মিডিয়া কোয়েরি স্পেসিফিকেশনে কিছু নতুন সংযোজন আপনাকে ডিভাইসের সাথে ইন্টারঅ্যাক্ট করার জন্য ব্যবহৃত পয়েন্টারের ধরণ এবং ব্যবহারকারী উপাদানগুলির উপর একটি পয়েন্টার ধরে রাখতে পারে কিনা তার মতো বৈশিষ্ট্যগুলি পরীক্ষা করতে দেয়।
-
hover -
pointer -
any-hover -
any-pointer
এই ডেমোটি বিভিন্ন ডিভাইসে দেখার চেষ্টা করুন, যেমন একটি নিয়মিত ডেস্কটপ কম্পিউটার এবং একটি ফোন বা ট্যাবলেট।
এই নতুন বৈশিষ্ট্যগুলি সমস্ত আধুনিক ব্রাউজারে ভাল সমর্থন করে। hover , any-hover , pointer , এবং any-pointer এর জন্য MDN পৃষ্ঠাগুলিতে আরও জানুন।
any-hover এবং any-pointer ব্যবহার করুন
any-hover এবং any-pointer বৈশিষ্ট্যগুলি পরীক্ষা করে যে ব্যবহারকারী উপাদানগুলির উপর একটি পয়েন্টার ধরে রাখতে পারে কিনা (প্রায়শই hovering বলা হয়), অথবা আদৌ একটি পয়েন্টার ব্যবহার করতে পারে কিনা, এমনকি যদি এটি তাদের ডিভাইসের সাথে যোগাযোগের প্রাথমিক উপায় নাও হয়। এগুলি ব্যবহার করার সময় খুব সতর্ক থাকুন, উদাহরণস্বরূপ, টাচস্ক্রিন ব্যবহারকারীকে মাউসে স্যুইচ করতে বাধ্য করা এড়াতে। তবে, any-hover এবং any-pointer কার্যকর হতে পারে যদি ব্যবহারকারীর কী ধরণের ডিভাইস রয়েছে তা নির্ধারণ করা গুরুত্বপূর্ণ। উদাহরণস্বরূপ, টাচস্ক্রিন এবং ট্র্যাকপ্যাড সহ একটি ল্যাপটপ হভার করার ক্ষমতা ছাড়াও মোটা এবং সূক্ষ্ম পয়েন্টারের সাথে মেলে।
ব্রেকপয়েন্ট কীভাবে নির্বাচন করবেন
ডিভাইস ক্লাস, অথবা কোনও পণ্য, ব্র্যান্ড নাম, অথবা অপারেটিং সিস্টেমের উপর ভিত্তি করে ব্রেকপয়েন্ট নির্ধারণ করবেন না। এর ফলে আপনার কোড বজায় রাখা কঠিন হয়ে পড়ে। পরিবর্তে, কন্টেন্টকে নির্ধারণ করতে দিন যে এর লেআউটটি কন্টেইনারের সাথে মানানসইভাবে কীভাবে পরিবর্তিত হয়।
ছোট করে শুরু করে, তারপর কাজ করে বড় ব্রেকপয়েন্টগুলি বেছে নিন।
প্রথমে ছোট স্ক্রিনের আকারের জন্য কন্টেন্ট ডিজাইন করুন, তারপর ব্রেকপয়েন্টের প্রয়োজন না হওয়া পর্যন্ত স্ক্রিনটি প্রসারিত করুন। এটি আপনাকে আপনার পৃষ্ঠায় ব্রেকপয়েন্টের সংখ্যা কমাতে এবং কন্টেন্টের উপর ভিত্তি করে সেগুলিকে অপ্টিমাইজ করতে দেয়।
নিচের উদাহরণটি এই পৃষ্ঠার শুরুতে আবহাওয়ার পূর্বাভাস উইজেটের উদাহরণটি তুলে ধরেছে। প্রথম ধাপ হল ছোট পর্দায় পূর্বাভাসটি সুন্দর করে দেখানো:
এরপর, ব্রাউজারটির আকার পরিবর্তন করুন যতক্ষণ না উপাদানগুলির মধ্যে খুব বেশি ফাঁকা স্থান থাকে যাতে উইজেটটি সুন্দর দেখায়। সিদ্ধান্তটি ব্যক্তিগত, তবে 600px এর বেশি অবশ্যই খুব বেশি প্রশস্ত।
600px এ একটি ব্রেকপয়েন্ট সন্নিবেশ করতে, আপনার CSS এর শেষে কম্পোনেন্টের জন্য দুটি মিডিয়া কোয়েরি তৈরি করুন: একটি যখন ব্রাউজার 600px বা তার চেয়ে সংকীর্ণ হয় তখন ব্যবহার করার জন্য, এবং একটি যখন এটি 600px চেয়ে প্রশস্ত হয় তখন ব্যবহার করার জন্য।
@media (max-width: 600px) {
}
@media (min-width: 601px) {
}
অবশেষে, CSS রিফ্যাক্টর করুন। 600px এর max-width জন্য মিডিয়া কোয়েরির ভিতরে, CSS যোগ করুন যা শুধুমাত্র ছোট স্ক্রিনের জন্য। 601px এর min-width জন্য মিডিয়া কোয়েরির ভিতরে বড় স্ক্রিনের জন্য CSS যোগ করুন।
প্রয়োজনে ছোটখাটো ব্রেকপয়েন্ট বেছে নিন
লেআউট উল্লেখযোগ্যভাবে পরিবর্তিত হলে প্রধান ব্রেকপয়েন্ট নির্বাচন করার পাশাপাশি, ছোটখাটো পরিবর্তনের জন্য সামঞ্জস্য করাও সহায়ক। উদাহরণস্বরূপ, প্রধান ব্রেকপয়েন্টগুলির মধ্যে কোনও উপাদানের মার্জিন বা প্যাডিং সামঞ্জস্য করা সহায়ক হতে পারে, অথবা লেআউটে এটিকে আরও স্বাভাবিক মনে করার জন্য ফন্টের আকার বৃদ্ধি করা সহায়ক হতে পারে।
এই উদাহরণটি আগেরটির মতোই একই প্যাটার্ন অনুসরণ করে, ছোট স্ক্রিন লেআউট অপ্টিমাইজ করে শুরু করে। প্রথমে, ভিউপোর্টের প্রস্থ 360px এর বেশি হলে ফন্ট বুস্ট করুন। এরপর, যখন পর্যাপ্ত জায়গা থাকবে, তখন আপনি উচ্চ এবং নিম্ন তাপমাত্রা আলাদা করতে পারেন যাতে তারা একই লাইনে থাকে এবং আবহাওয়ার আইকনগুলিকে আরও বড় করতে পারেন।
@media (min-width: 360px) {
body {
font-size: 1.0em;
}
}
@media (min-width: 500px) {
.seven-day-fc .temp-low,
.seven-day-fc .temp-high {
display: inline-block;
width: 45%;
}
.seven-day-fc .seven-day-temp {
margin-left: 5%;
}
.seven-day-fc .icon {
width: 64px;
height: 64px;
}
}
বড় স্ক্রিনের জন্য, আমরা পূর্বাভাস প্যানেলের সর্বাধিক প্রস্থ সীমিত করার পরামর্শ দিচ্ছি যাতে এটি পুরো স্ক্রিনের প্রস্থ ব্যবহার না করে।
@media (min-width: 700px) {
.weather-forecast {
width: 700px;
}
}
পড়ার জন্য টেক্সট অপ্টিমাইজ করুন
ক্লাসিক পঠনযোগ্যতা তত্ত্ব অনুসারে, একটি আদর্শ কলামে প্রতি লাইনে ৭০ থেকে ৮০টি অক্ষর থাকা উচিত (ইংরেজিতে প্রায় ৮ থেকে ১০টি শব্দ)। প্রতিবার যখনই একটি টেক্সট ব্লকের প্রস্থ ১০টি শব্দের বেশি হবে, তখনই একটি ব্রেকপয়েন্ট যোগ করার কথা বিবেচনা করুন।
এই উদাহরণে, 1em এ Roboto ফন্টটি ছোট স্ক্রিনে প্রতি লাইনে 10 টি শব্দ তৈরি করে, কিন্তু বড় স্ক্রিনের জন্য একটি ব্রেকপয়েন্ট প্রয়োজন। এই ক্ষেত্রে, যদি ব্রাউজারের প্রস্থ 575px এর বেশি হয়, তাহলে আদর্শ কন্টেন্ট প্রস্থ 550px হবে।
@media (min-width: 575px) {
article {
width: 550px;
margin-left: auto;
margin-right: auto;
}
}
কন্টেন্ট লুকানো এড়িয়ে চলুন (:#avoid-hiding-content)
স্ক্রিনের আকারের উপর নির্ভর করে কোন কন্টেন্ট লুকাবেন বা দেখাবেন তা বেছে নেওয়ার সময় সতর্ক থাকুন। শুধুমাত্র স্ক্রিনে ফিট করতে পারছেন না বলেই কন্টেন্ট লুকাবেন না। স্ক্রিনের আকার ভবিষ্যদ্বাণী করে না যে ব্যবহারকারী কী দেখতে চাইবেন। উদাহরণস্বরূপ, আবহাওয়ার পূর্বাভাস থেকে পরাগরেণুর সংখ্যা বাদ দেওয়া বসন্তকালীন অ্যালার্জি আক্রান্তদের জন্য একটি গুরুতর সমস্যা হতে পারে যাদের বাইরে যেতে পারবেন কিনা তা নির্ধারণ করার জন্য এই তথ্যের প্রয়োজন।
Chrome DevTools-এ মিডিয়া কোয়েরি ব্রেকপয়েন্ট দেখুন
আপনার মিডিয়া কোয়েরি ব্রেকপয়েন্ট সেট আপ করার পরে, তারা আপনার সাইটের চেহারাকে কীভাবে প্রভাবিত করে তা পরীক্ষা করুন। ব্রেকপয়েন্টগুলি ট্রিগার করার জন্য আপনি আপনার ব্রাউজার উইন্ডোর আকার পরিবর্তন করতে পারেন, তবে Chrome DevTools-এর একটি অন্তর্নির্মিত বৈশিষ্ট্য রয়েছে যা দেখায় যে বিভিন্ন ব্রেকপয়েন্টের অধীনে একটি পৃষ্ঠা কেমন দেখাচ্ছে।
বিভিন্ন ব্রেকপয়েন্টের অধীনে আপনার পৃষ্ঠাটি দেখতে:
- DevTools খুলুন ।
- ডিভাইস মোড চালু করুন। এটি ডিফল্টরূপে রেসপন্সিভ মোডে খোলে।
- আপনার মিডিয়া কোয়েরিগুলি দেখতে, ডিভাইস মোড মেনু খুলুন এবং মিডিয়া কোয়েরিগুলি দেখান নির্বাচন করুন। এটি আপনার পৃষ্ঠার উপরে রঙিন বার হিসাবে আপনার ব্রেকপয়েন্টগুলি দেখায়।
- মিডিয়া কোয়েরি সক্রিয় থাকাকালীন আপনার পৃষ্ঠাটি দেখতে বারগুলির একটিতে ক্লিক করুন। মিডিয়া কোয়েরির সংজ্ঞায় যেতে বারটিতে ডান-ক্লিক করুন।