মিডিয়া প্রশ্নগুলিতে "পর্দা" এবং "একমাত্র পর্দা" এর মধ্যে পার্থক্য কী?

Question

মিডিয়া প্রশ্নের মধ্যে screenএবং only screenমধ্যে পার্থক্য কি ?

<link media="screen and (max-device-width: 480px)" rel="stylesheet" href="m.css" />
<link media="only screen and (max-device-width: 480px)" rel="stylesheet" href="m.css" />

কেন আমাদের ব্যবহার করা দরকার only screen? না screenনিজেই যথেষ্ট তথ্য রেন্ডার করা থেকে উপলব্ধ করা হয় না শুধুমাত্র পর্দা জন্য?

আমি এই তিনটি বিভিন্ন উপায়ে ব্যবহার করে অনেক প্রতিক্রিয়াশীল ওয়েবসাইট দেখেছি:

@media screen and (max-width:632px)

@media (max-width:632px)

@media only screen and (max-width:632px)

Answer 1

আসুন আপনার উদাহরণগুলি একে একে ভেঙে দিন।

@media (max-width:632px)

এইটি max-width63৩২px এর একটি উইন্ডোটির জন্য বলছে যে আপনি এই স্টাইলগুলি প্রয়োগ করতে চান। সেই আকারে আপনি বেশিরভাগ ক্ষেত্রে ডেস্কটপ স্ক্রিনের চেয়ে ছোট কোনও বিষয়ে কথা বলবেন।

@media screen and (max-width:632px)

এইটি স্টাইলটি প্রয়োগ করে a৩২px screenসহ একটি ডিভাইস এবং একটি উইন্ডোর max-widthজন্য বলছে। আপনি অন্যান্য উপলভ্য মিডিয়া ধরণের সর্বাধিক সাধারণ অন্যটির screenবিপরীতে হিসাবে উল্লেখ করছেন ব্যতীত এটি উপরেরটির প্রায় সমান ।print

@media only screen and (max-width:632px)

এটিকে ব্যাখ্যা করার জন্য ডাব্লু 3 সি থেকে সরাসরি একটি উদ্ধৃতি এখানে রয়েছে।

পুরানো ব্যবহারকারী এজেন্টদের থেকে স্টাইল শিট লুকানোর জন্য 'কেবল' কীওয়ার্ডটি ব্যবহার করা যেতে পারে। ব্যবহারকারী এজেন্টদের অবশ্যই 'কেবল' দিয়ে শুরু হওয়া মিডিয়া ক্যোয়ারীগুলি প্রক্রিয়া করতে হবে যেন 'কেবল' কীওয়ার্ডটি উপস্থিত ছিল না।

"কেবল" হিসাবে কোনও মিডিয়া প্রকার নেই বলে স্টাইল শীটটি পুরানো ব্রাউজারগুলি দ্বারা উপেক্ষা করা উচিত।

এখানে সেই পৃষ্ঠাটির লিঙ্কটি যা পৃষ্ঠায় 9 উদাহরণে প্রদর্শিত হয়েছে।

আশা করি এটি মিডিয়া প্রশ্নগুলিতে কিছুটা আলোকপাত করবে।

সম্পাদনা করুন:

কীওয়ার্ডটি কীভাবে সত্যিই পরিচালনা করা হয় সে সম্পর্কে @ হাইব্রিডস দুর্দান্ত উত্তরটি পরীক্ষা করে দেখুন only।

Comments

এমন যে কেউ একটি ভাল ব্যাখ্যা খুঁজছেন ছিল জন্য কেনonly শব্দ পুরোনো ব্রাউজার থেকে স্টাইল শীট লুকাবো, নীচের @hybrid দ্বারা উত্তর দেখুন। তিনি এটি খুব ভাল ব্যাখ্যা করেছেন।

— জেএমটাইলার

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

— ছারভে

কোন ডিভাইসের স্ক্রিন নেই?

— কোকোডোকো

@ কোকোডোকোগুলিকে পছন্দ করুন তবে গুরুতরভাবে, প্রিন্টার এবং স্ক্রিন পাঠকদের অগত্যা পর্দা নেই। প্লাস বর্তমানে বা ভবিষ্যতে অন্য যে screenকোনও বিষয় যা অন্য মিডিয়া ধরণের তালিকাভুক্ত হিসাবে চিহ্নিত করা যায় না ।

— ম্যাথু গ্রিন

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

— ম্যাথু গ্রিন

Answer 2

নীচে অ্যাডোব ডক্স থেকে প্রাপ্ত ।

---

মিডিয়া প্রশ্নের স্পেসিফিকেশন কীওয়ার্ডও সরবরাহ করে only, যা পুরানো ব্রাউজারগুলি থেকে মিডিয়া প্রশ্নগুলি গোপন করার উদ্দেশ্যে। মত not, কীওয়ার্ডটি অবশ্যই ঘোষণার শুরুতে আসতে হবে। উদাহরণ স্বরূপ:

media="only screen and (min-width: 401px) and (max-width: 600px)"

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

media="only"

কেবলমাত্র কোনও মিডিয়া টাইপ না থাকায় স্টাইলশীট উপেক্ষা করা হয়। একইভাবে, একটি পুরানো ব্রাউজারটির ব্যাখ্যা করা উচিত

media="screen and (min-width: 401px) and (max-width: 600px)"

যেমন

media="screen"

অন্য কথায়, এটি সমস্ত স্ক্রিন ডিভাইসে স্টাইলের নিয়মগুলি প্রয়োগ করা উচিত, যদিও এটি মিডিয়া প্রশ্নের কী বোঝায় তা জানে না।

দুর্ভাগ্যক্রমে, IE 6–8 স্পেসিফিকেশনটি সঠিকভাবে প্রয়োগ করতে ব্যর্থ হয়েছে।

সমস্ত স্ক্রীন ডিভাইসে স্টাইল প্রয়োগ করার পরিবর্তে এটি পুরোপুরি স্টাইল শীটটিকে উপেক্ষা করে।

এই আচরণ সত্ত্বেও, আপনি যদি অন্য, কম সাধারণ ব্রাউজারগুলির থেকে শৈলীগুলি আড়াল করতে চান তবেই মিডিয়া প্রশ্নগুলি উপসর্গের জন্য এটি প্রস্তাবিত।

---

সুতরাং, ব্যবহার

media="only screen and (min-width: 401px)"

এবং

media="screen and (min-width: 401px)"

আইই --৮ এ একই প্রভাব ফেলবে: উভয়ই এই স্টাইলগুলি ব্যবহার করা থেকে বিরত রাখবে। সেগুলি তবে ডাউনলোড হবে।

এছাড়াও, CSS3 মিডিয়া ক্যোয়ারী সমর্থন করে এমন ব্রাউজারগুলিতে, ভিউপোর্টের প্রস্থটি 401pxযদি পর্দার চেয়ে বড় হয় এবং মিডিয়া প্রকারটি স্ক্রিন হয় তবে উভয় সংস্করণ স্টাইলগুলি লোড করবে ।

আমি সম্পূর্ণরূপে নিশ্চিত নই যে সিএসএস 3 মিডিয়া ক্যোয়ারী সমর্থন করে না এমন কোন ব্রাউজারগুলির onlyসংস্করণটির প্রয়োজন হবে

media="only screen and (min-width: 401px)" 

উল্টোদিকে

media="screen and (min-width: 401px)"

এটি ব্যাখ্যা করা হয় না তা নিশ্চিত করার জন্য

media="screen"

এটি ডিভাইস ল্যাব অ্যাক্সেস সহ কারও পক্ষে ভাল পরীক্ষা হবে।

Comments

সুতরাং যদি আমরা সিএসএস ফাইলগুলিতে মিডিয়া প্রশ্নগুলির বিষয়ে কথা বলি তবে আমরা "কেবল" ড্রপ করতে পারি, কারণ পুরানো ব্রাউজারগুলি মিডিয়া কোয়েরিগুলি যা কিছু বোঝে না, তা কি আমরা পারি না?

— 1234ru

ভাল, খুব সুন্দর উত্তর। ধন্যবাদ!

— আলেকজান্ডার সুর্যাপেল

ভাগ করা লিঙ্কটি সত্যই সহায়ক ছিল। ধন্যবাদ

— রাফেল

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

— পিটার নট

@ পিটারকান্ট আপনি কেন এমন পুরানো ডিভাইসগুলিকে সমর্থন করছেন? সত্যই কৌতূহলী।

— প্রমিথিউস

Answer 3

ছোট স্ক্রিনযুক্ত অনেকগুলি স্মার্টফোনের স্টাইল করতে আপনি লিখতে পারেন:

@media screen and (max-width:480px) { … } 

কোনও পুরানো ব্রাউজারগুলিকে আইফোন বা অ্যান্ড্রয়েড ফোন স্টাইল শীট দেখতে বাধা দেওয়ার জন্য, আপনি লিখতে পারেন:

@media only screen and (max-width: 480px;) { … } 

এই নিবন্ধটি আরও পড়ুন http://webdesign.about.com/od/css3/a/css3-media-queries.htm

Comments

আমি এখনও এটি খুব পরিষ্কার না। আমি আমার প্রশ্নটিও আপডেট করেছি। আপনি কোন উদাহরণ দিতে পারেন?

— জিতেন্দ্র ব্যাস

আপনি যদি মোবাইল প্রথম পদ্ধতির ব্যবহার করেন? সুতরাং, আমাদের কাছে প্রথমে মোবাইল সিএসএস রয়েছে এবং তারপরে বৃহত্তর সাইটগুলিকে টার্গেট করতে ন্যূনতম প্রস্থ ব্যবহার করা হবে। আমাদের onlyসেই প্রসঙ্গে কিওয়ার্ডটি ব্যবহার করা উচিত নয় , তাই না?

— আশিতাকা

এই উত্তরটি বুঝতে খুব সহজ ছিল! :) কেবলমাত্র পুরানো সংস্করণগুলি যেমন আইই 6 বা অপেরা 5 বা 6 এর মতো ডেটা লোড করা থেকে রক্ষা করা যা অ্যান্ড্রয়েড বা ক্রোম 30 বা আইই 10 এর জন্য উপস্থাপন করতে হবে .. এক্সেলেন্ট উত্তর সন্দীপ :) একটি +1 পাওয়ার যোগ্য

— আফজাল আহমদ জিশান

Answer 4

@ হাইব্রিডের উত্তরটি যথেষ্ট তথ্যবহুল, যদি না এটি @ashitaka দ্বারা বর্ণিত উদ্দেশ্যটির ব্যাখ্যা দেয় না "আপনি যদি মোবাইল প্রথম পদ্ধতির ব্যবহার করেন তবে কী? তাই, আমাদের কাছে প্রথমে মোবাইল সিএসএস রয়েছে এবং তারপরে বড় সাইটগুলিকে টার্গেট করতে ন্যূনতম প্রস্থ ব্যবহার করতে হবে। আমাদের সেই প্রসঙ্গে কেবল কীওয়ার্ডটি ব্যবহার করা উচিত নয়? "

এখানে যুক্ত করতে চান যে উদ্দেশ্যটি কেবল সমর্থনযোগ্য ব্রাউজারগুলিকে অন্য ডিভাইস স্টাইলটি ব্যবহার না করা যেমন এটি "স্ক্রিন" থেকে শুরু হয় তা এড়াতে পর্দার জন্য গ্রহণ করবে যেখানে এটি "কেবল" শৈলীর থেকে শুরু করলে তা উপেক্ষা করা হবে।

উত্তরে আশিতক এই উদাহরণটি বিবেচনা করুন

<link rel="stylesheet" type="text/css" 
  href="android.css" media="only screen and (max-width: 480px)" />
<link rel="stylesheet" type="text/css" 
  href="desktop.css" media="screen and (min-width: 481px)" />

যদি আমরা "কেবল" ব্যবহার না করি তবে এটি এখনও কাজ করবে কারণ ডেস্কটপ স্টাইলটি স্ট্রাইকিং অ্যান্ড্রয়েড স্টাইলগুলি ব্যবহার করা হবে তবে অপ্রয়োজনীয় ওভারহেড সহ। এক্ষেত্রে যদি কোনও ব্রাউজার সমর্থন না করে তবে এটি প্রথম উপেক্ষা করে দ্বিতীয় স্টাইল-শীটে পড়ে যাবে back

Answer 5

@media screen and (max-width:480px) { … } 

screenএখানে মিডিয়া ক্যোয়ারির পর্দার আকার নির্ধারণ করতে হবে। যেমন প্রদর্শন ক্ষেত্রের সর্বোচ্চ প্রস্থ 480px। সুতরাং এটি অন্যান্য উপলব্ধ মিডিয়া ধরণের বিপরীতে স্ক্রিনটি নির্দিষ্ট করছে।

@media only screen and (max-width: 480px;) { … } 

only screen এখানে পুরানো ব্রাউজারগুলিকে প্রতিরোধ করতে ব্যবহার করা হয় যা মিডিয়া বৈশিষ্ট্যগুলি নির্দিষ্ট শৈলীর প্রয়োগ থেকে মিডিয়া ক্যোয়ারিকে সমর্থন করে না।