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

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

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

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

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

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

  • পিক্সেলের পরিবর্তে রিম এবং ইম ইউনিট (পিক্স)
  • প্রতিটি ওয়েব পৃষ্ঠার ভিউপোর্ট / স্কেল সেট করা
  • মিডিয়া প্রশ্নগুলি ব্যবহার করে

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

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

আরও পড়ুন: প্রয়োজনীয় CSS3 বৈশিষ্ট্য প্রতারণা পত্রক

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

মিডিয়া ক্যোয়ারী ব্যবহার করে

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

মিডিয়া প্রশ্নগুলির কাঠামো

একটি মিডিয়া অনুসন্ধান কাঠামোর উদাহরণ

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

মিডিয়া ক্যোয়ারির সাধারণ কাঠামোর মধ্যে রয়েছে:

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

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

একমাত্র কীওয়ার্ড সহ মিডিয়া অনুসন্ধানের উদাহরণ Example

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

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

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

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

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

মিডিয়া প্রশ্নগুলির স্থান

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

অভ্যন্তরীণ পদ্ধতিতে HTML ফাইলের <হেড> ট্যাগটিতে <স্টাইল> ট্যাগ যুক্ত করা এবং <স্টাইল> ট্যাগের পরামিতিগুলির মধ্যে মিডিয়া ক্যোয়ারী তৈরি করা অন্তর্ভুক্ত।

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

মিডিয়া প্রশ্নগুলির ব্যাপ্তি

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

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

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

 
/* 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 উপাদান যা বহিরাগত স্টাইলশিট থেকে সিএসএস স্টাইলিং আমদানি করতে ব্যবহৃত হয়। এই ট্যাগটির একটি মিডিয়া সম্পত্তি রয়েছে যা মিডিয়া ক্যোয়ারী সিএসএস-তে একইভাবে কাজ করে।

 <!-- main stylesheet -->
<link rel="stylesheet" href="main.css">
<!-- tablet stylesheet -->
<link rel="stylesheet" media="(max-width:800px) and (min-width:451px)"
href="tablet.css">
<!-- smartphone stylesheet -->
<link rel="stylesheet" media="(max-width:450px)" href="smartphone.css">

উপরের কোডটি আপনার এইচটিএমএল ফাইলের <হেড> ট্যাগে রাখা উচিত। এখন আপনাকে যা করতে হবে তা হ'ল মেইন সিএসএস, ট্যাবলেট.এসএস, এবং স্মার্টফোন.এসএস ফাইলের সাহায্যে তিনটি পৃথক সিএসএস ফাইল তৈরি করতে হবে – তারপরে প্রতিটি ডিভাইসের জন্য আপনি যে নির্দিষ্ট নকশাটি চান তা তৈরি করুন।

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

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

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

চিত্র ক্রেডিট: নেতিবাচক স্থান / পেক্সেল