প্রতিক্রিয়াশীল ওয়েবসাইট তৈরির জন্য এইচটিএমএল এবং সিএসএস -এ মিডিয়া প্রশ্নগুলি কীভাবে ব্যবহার করবেন

প্রতিক্রিয়াশীল ওয়েবসাইট তৈরির জন্য এইচটিএমএল এবং সিএসএস -এ মিডিয়া প্রশ্নগুলি কীভাবে ব্যবহার করবেন

আপনি যদি ওয়েবসাইট/ওয়েব অ্যাপ্লিকেশন ডেভেলপ করতে চান, তাহলে প্রতিক্রিয়াশীল ডিজাইন কিভাবে তৈরি করবেন তা জানা আপনার সাফল্যের জন্য অপরিহার্য।





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



মিডিয়া প্রশ্নগুলি ব্যবহার করা আপনার ওয়েবসাইট/ওয়েব অ্যাপটি প্রতিটি ডিভাইসে আপনি যেভাবে চান তা ঠিক আছে তা নিশ্চিত করার সর্বোত্তম উপায়।





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

সংক্ষেপে, প্রতিক্রিয়াশীল নকশা এইচটিএমএল/সিএসএস ব্যবহার করে একটি ওয়েবসাইট/ওয়েব অ্যাপ লেআউট তৈরি করে যা বিভিন্ন স্ক্রিন সাইজের সাথে খাপ খায়। এইচটিএমএল/সিএসএস -এ একটি ওয়েবসাইট ডিজাইনে প্রতিক্রিয়াশীলতা অর্জনের কয়েকটি ভিন্ন উপায় রয়েছে:

  • পিক্সেল (px) এর পরিবর্তে rem এবং em ইউনিট ব্যবহার করা
  • প্রতিটি ওয়েবপেজের ভিউপোর্ট/স্কেল নির্ধারণ করা
  • মিডিয়া প্রশ্নের ব্যবহার

মিডিয়া প্রশ্নগুলি কী?

একটি মিডিয়া প্রশ্ন হল CSS এর একটি বৈশিষ্ট্য যা CSS3 সংস্করণে প্রকাশিত হয়েছিল। এই নতুন বৈশিষ্ট্যটি চালু করার সাথে সাথে CSS এর ব্যবহারকারীরা একটি ডিভাইস/স্ক্রিনের উচ্চতা, প্রস্থ এবং ওরিয়েন্টেশন (ল্যান্ডস্কেপ বা পোর্ট্রেট মোড) এর উপর ভিত্তি করে একটি ওয়েবপৃষ্ঠার প্রদর্শন সামঞ্জস্য করার ক্ষমতা অর্জন করে।



আরও পড়ুন: অপরিহার্য CSS3 বৈশিষ্ট্য চিট শীট

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



মিডিয়া প্রশ্ন ব্যবহার করে

মিডিয়া ক্যোয়ারী ব্যবহার করার সময় আপনাকে বিভিন্ন বিষয় বিবেচনা করতে হবে: কাঠামো, বসানো, পরিসীমা এবং লিঙ্কিং।

মিডিয়া প্রশ্নের কাঠামো

একটি মিডিয়া প্রশ্ন কাঠামোর উদাহরণ


@media only/not media-type and (expression){
/*CSS code*/
}

একটি মিডিয়া প্রশ্নের সাধারণ কাঠামোর মধ্যে রয়েছে:



  • @মিডিয়া কীওয়ার্ড
  • নয়/শুধুমাত্র কীওয়ার্ড
  • একটি মিডিয়া-টাইপ (যা স্ক্রিন, প্রিন্ট বা স্পিচ হতে পারে)
  • কীওয়ার্ড এবং
  • বন্ধনীতে আবদ্ধ একটি অনন্য অভিব্যক্তি
  • সিএসএস কোড খোলা এবং বন্ধ কোঁকড়া ধনুর্বন্ধনী একটি জোড়া মধ্যে আবদ্ধ।

সম্পর্কিত: মুদ্রণের জন্য ডকুমেন্ট ফরম্যাট করতে CSS ব্যবহার করা

একমাত্র কীওয়ার্ড সহ মিডিয়া প্রশ্নের উদাহরণ


@media only screen and (max-width: 450px){
body{
background-color: blue;
}
}

উপরের উদাহরণটি CSS স্টাইলিং (বিশেষত একটি নীল পটভূমি রঙ) শুধুমাত্র ডিভাইসের স্ক্রিনগুলিতে প্রযোজ্য যার প্রস্থ 450px এবং এর নীচে - তাই মূলত স্মার্টফোনের জন্য। শুধুমাত্র কীওয়ার্ডটি নয় কীওয়ার্ড দিয়ে প্রতিস্থাপন করা যেতে পারে এবং তারপরে উপরের মিডিয়া ক্যোয়ারীতে সিএসএস স্টাইলিং কেবল মুদ্রণ এবং বক্তৃতাতে প্রযোজ্য হবে।

যাইহোক, ডিফল্টরূপে, একটি সাধারণ মিডিয়া ক্যোয়ারী ডিক্লারেশন তিনটি মিডিয়া টাইপের ক্ষেত্রে প্রযোজ্য তাই একটি মিডিয়া টাইপ নির্দিষ্ট করার কোন প্রয়োজন নেই যদি না লক্ষ্য এক বা একাধিক বাদ দেওয়া হয়।

ডিফল্ট মিডিয়া প্রশ্নের উদাহরণ


/*design for smartphones*/
@media(max-width: 450px){
body{
background-color: blue;
}
}

মিডিয়া প্রশ্নের স্থান নির্ধারণ

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

অভ্যন্তরীণ পদ্ধতিতে এইচটিএমএল ফাইলের ট্যাগে ট্যাগ যুক্ত করা এবং ট্যাগের পরামিতিগুলির মধ্যে মিডিয়া প্রশ্ন তৈরি করা অন্তর্ভুক্ত।

বাহ্যিক পদ্ধতিতে একটি বহিরাগত CSS ফাইলে একটি মিডিয়া ক্যোয়ারী তৈরি করা এবং ট্যাগের মাধ্যমে এটি আপনার HTML ফাইলের সাথে যুক্ত করা জড়িত।

মিডিয়া প্রশ্নের পরিসীমা

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

ডিফল্ট মিডিয়া ক্যোয়ারী কোড যা আমাদের উপরে স্মার্টফোনের লক্ষ্য (450px প্রশস্ত এবং এর নিচে), তাই যদি আপনি ট্যাবলেটগুলির জন্য একটি ভিন্ন পটভূমি সেট করতে চান তবে আপনি মনে করতে পারেন যে আপনি কেবল আপনার পূর্ব-বিদ্যমান CSS ফাইলে নিম্নলিখিত কোডটি যোগ করতে পারেন।

ট্যাবলেট মিডিয়া প্রশ্নের উদাহরণ


/* design for tablets */
@media(max-width: 800px){
body{
background-color: red;
}
}

একমাত্র সমস্যা হল, অগ্রাধিকার ক্রমের কারণে, ট্যাবলেটগুলির একটি লাল পটভূমি রঙ থাকবে এবং স্মার্টফোনেও এখন একটি লাল পটভূমির রঙ থাকবে কারণ 450px এবং এর অধীনে 800px এর নিচে।

এই সামান্য সমস্যার সমাধানের একটি উপায় হল স্মার্টফোনের আগে ট্যাবলেটের জন্য মিডিয়া প্রশ্ন যোগ করা; পরেরটি আগেরটিকে ওভাররাইড করবে এবং আপনার কাছে এখন একটি নীল পটভূমি রঙের স্মার্টফোন এবং লাল পটভূমির রঙের ট্যাবলেট থাকবে।

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

রেঞ্জ উদাহরণ সহ ট্যাবলেট মিডিয়া প্রশ্ন


/* design for tablets */
@media(max-width: 800px) and (min-width:451){
body{
background-color: red;
}
}

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

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

ট্যাগ হল একটি HTML উপাদান যা বহিরাগত স্টাইলশীট থেকে CSS স্টাইলিং আমদানি করতে ব্যবহৃত হয়। এই ট্যাগটিতে একটি মিডিয়া প্রপার্টি রয়েছে যা সিএসএস -এ মিডিয়া ক্যোয়ারীর মতো কাজ করে।




href='tablet.css'>


উপরের কোডটি আপনার HTML ফাইলের ট্যাগে রাখা উচিত। এখন আপনাকে যা করতে হবে তা হল main.css, tablet.css, এবং smartphone.css ফাইলের নাম দিয়ে তিনটি পৃথক CSS ফাইল তৈরি করা — তারপর প্রতিটি ডিভাইসের জন্য নির্দিষ্ট ডিজাইন তৈরি করুন।

মূল ফাইলের স্টাইল 800px এর চেয়ে বেশি প্রস্থের সব স্ক্রিনে প্রযোজ্য হবে, ট্যাবলেট ফাইলের স্টাইল 450px এবং 801px এর মধ্যে প্রস্থের সমস্ত স্ক্রিনে প্রযোজ্য হবে এবং স্মার্টফোন ফাইলের স্টাইলটি নীচের সমস্ত স্ক্রিনে প্রযোজ্য হবে 451px

আইফোনে ভিডিওতে কীভাবে সংগীত যুক্ত করবেন

এখন আপনার কাছে প্রতিক্রিয়াশীল ডিজাইন তৈরির সরঞ্জাম রয়েছে

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

ইমেজ ক্রেডিট: নেগেটিভ স্পেস/ পেক্সেলস

শেয়ার করুন শেয়ার করুন টুইট ইমেইল কিভাবে CSS এ ব্যাকগ্রাউন্ড ইমেজ সেট করবেন

ওয়েব পেজ স্টাইল করার জন্য CSS একটি শক্তিশালী হাতিয়ার। কিভাবে একটি ব্যাকগ্রাউন্ড ইমেজ স্থাপন করতে হয় তা শেখা আপনাকে অনেক CSS বেসিক শেখায়।

পরবর্তী পড়ুন সম্পর্কিত বিষয়
  • প্রোগ্রামিং
  • ওয়েব ডেভেলপমেন্ট
  • ওয়েব ডিজাইন
  • সিএসএস
লেখক সম্পর্কে কাদিশা কেন(21 নিবন্ধ প্রকাশিত)

Kadeisha Kean একজন ফুল স্ট্যাক সফটওয়্যার ডেভেলপার এবং টেকনিক্যাল/টেকনোলজি রাইটার। কিছু জটিল প্রযুক্তিগত ধারণাকে সরলীকরণ করার তার স্বতন্ত্র ক্ষমতা আছে; যে কোন প্রযুক্তি নবজাতকের দ্বারা সহজেই বোঝা যায় এমন উপাদান তৈরি করা। তিনি লেখালেখি, আকর্ষণীয় সফটওয়্যার বিকাশ এবং বিশ্ব ভ্রমণ (তথ্যচিত্রের মাধ্যমে) সম্পর্কে উত্সাহী।

Kadeisha Kean থেকে আরো

আমাদের নিউজলেটার সদস্যতা

প্রযুক্তি টিপস, রিভিউ, ফ্রি ইবুক এবং এক্সক্লুসিভ ডিলের জন্য আমাদের নিউজলেটারে যোগ দিন!

সাবস্ক্রাইব করতে এখানে ক্লিক করুন