উত্তর:
দুটি (বা আরও) বিভিন্ন বিধি নির্দিষ্ট করতে কমা ব্যবহার করুন:
@media screen and (max-width: 995px) , screen and (max-height: 700px) {
...
}Https://developer.mozilla.org/en/CSS/Media_queries/ থেকে
... এছাড়াও, আপনি কমা-বিচ্ছিন্ন তালিকায় একাধিক মিডিয়া প্রশ্নগুলি একত্রিত করতে পারেন; তালিকার মিডিয়া প্রশ্নের মধ্যে যদি কোনওটি সত্য হয় তবে সম্পর্কিত স্টাইল শিটটি প্রয়োগ করা হবে। এটি যৌক্তিক "বা" অপারেশনের সমতুল্য।
দ্রুত উত্তর।
কমা দিয়ে পৃথক বিধি:
@media handheld, (min-width: 650px), (orientation: landscape) { ... }
দীর্ঘ উত্তর।
এখানে অনেক কিছুই রয়েছে, তবে আমি এটিকে তথ্যকে ঘন করার চেষ্টা করেছি, কেবল তেঁতুলী লেখা নয়। নিজেকে শেখার একটা ভাল সুযোগ হয়েছে! নিয়মিতভাবে পড়ার জন্য সময় নিন এবং আমি আশা করি এটি সহায়ক হবে।
মিডিয়া ক্যোয়ারীগুলি মূলত ডিভাইস- বা পরিস্থিতি-নির্দিষ্ট ব্রাউজিং অভিজ্ঞতা তৈরি করতে ওয়েব ডিজাইনে ব্যবহৃত হয়; এটি @mediaএকটি পৃষ্ঠার সিএসএসের মধ্যে ঘোষণা ব্যবহার করে করা হয় । এটি একটি বিশাল সংখ্যক পরিস্থিতিতে একটি ওয়েবপৃষ্ঠা আলাদাভাবে প্রদর্শন করতে ব্যবহৃত হতে পারে: আপনি কোনও ট্যাবলেট বা টিভিতে বিভিন্ন দিক অনুপাত সহ, আপনার ডিভাইসের রঙ বা কালো-সাদা পর্দা রয়েছে কিনা, বা সম্ভবত বেশিরভাগ ক্ষেত্রেই হতে পারে কোনও ব্যবহারকারী তাদের ব্রাউজারের আকার পরিবর্তন করে বা বিভিন্ন স্ক্রিনের মাপের সাথে ব্রাউজিং ডিভাইসের মধ্যে স্যুইচ করে (খুব সাধারণভাবে বলতে গেলে, এরকম ডিজাইনিংকে রেসপন্সিং ওয়েব ডিজাইন হিসাবে উল্লেখ করা হয় )
এই পরিস্থিতিতে নকশা করার জন্য, চারটি লজিকাল অপারেটর উপস্থিত রয়েছে যা বিভিন্ন ডিভাইস বা ভিউপোর্ট মাপের লক্ষ্যবস্তু করার সময় প্রয়োজনের আরও জটিল সংমিশ্রণের প্রয়োজন হতে পারে ।
(দ্রষ্টব্য: আপনি যদি মিডিয়া বিধি, মিডিয়া ক্যোয়ারী এবং বৈশিষ্ট্য প্রশ্নের মধ্যে পার্থক্য বুঝতে না পারেন তবে মিডিয়া ক্যোয়ার সিনট্যাক্সের সাথে সম্পর্কিত পরিভাষার সাথে আরও ভালভাবে পরিচিত হতে প্রথমে এই উত্তরের নীচের অংশটি ব্রাউজ করুন
1. এবং ( এবং কীওয়ার্ড)
যে প্রয়োজন সব শর্ত নিদিষ্ট পূরণ করা আবশ্যক styling নিয়ম সামনে প্রভাবী হবে।
@media screen and (min-width: 700px) and (orientation: landscape) { ... }
নিদিষ্ট styling নিয়ম জায়গা ঢোকা হবে না যদি না সব নিম্নলিখিত সত্য হিসাবে মূল্যায়ন:
দ্রষ্টব্য: আমি বিশ্বাস করি যে একসাথে ব্যবহৃত হয়েছে, এই তিনটি বৈশিষ্ট্য অনুসন্ধানগুলি একটি একক মিডিয়া ক্যোয়ারী তৈরি করে ।
2. বা ( কমা দ্বারা পৃথক করা তালিকা )
একটি বা কীওয়ার্ডের পরিবর্তে কমা-বিচ্ছিন্ন তালিকা একসাথে আরও জটিল মিডিয়া নিয়ম গঠনের জন্য একাধিক মিডিয়া ক্যোয়ারিকে এক সাথে জড়িত করে ব্যবহার করা হয়
@media handheld, (min-width: 650px), (orientation: landscape) { ... }
যে কোনও একটি মিডিয়া ক্যোয়ারী সত্য হিসাবে মূল্যায়ন করলে নির্দিষ্ট স্টাইলিং বিধিগুলি কার্যকর হবে :
৩. নয় ( কীওয়ার্ড নয় )
না keyword হতে পারে একটি একক অস্বীকার করতে ব্যবহৃত মিডিয়া কুয়েরি (এবং একটি পূর্ণ মিডিয়া নিয়ম --meaning এটি শুধুমাত্র কমা একটি সেট এবং পূর্ণ মিডিয়া @media ঘোষণা নিম্নলিখিত নিয়ম মধ্যে এন্ট্রি negates)।
একইভাবে, নোট যে না শব্দ negates মিডিয়া প্রশ্নের, এটা করতে পারবে না একটি মিডিয়া কুয়েরি মধ্যে একজন ব্যক্তি বৈশিষ্ট্য ক্যোয়ারী অস্বীকার করতে ব্যবহার করা যেতে। *
@media not screen and (min-resolution: 300dpi), (min-width: 800px) { ... }
এখানে নির্দিষ্ট স্টাইলিং কার্যকর হলে কার্যকর হবে
অন্য কথায়, যদি মিডিয়া টাইপটি 'স্ক্রিন' হয় এবং নূন্যতম -রেজোলিউশনটি 300 ডিপিআই হয়, তবে ভিউপোর্টের ন্যূনতম প্রস্থ কমপক্ষে 800 পিক্সেল না হলে নিয়ম কার্যকর হবে না ।
(কীওয়ার্ডটি বলতে কিছুটা মজার বিষয় হতে পারে I আমি আরও ভাল করতে পারি কিনা তা আমাকে জানান;)
4. শুধুমাত্র ( কেবল কীওয়ার্ড)
আমি এটি বুঝতে পেরে, একমাত্র কীওয়ার্ডটি পুরানো ব্রাউজারগুলিকে নতুন ব্যবহৃত মিডিয়া ক্যোয়ারিকে আগের-ব্যবহৃত, সংকীর্ণ মিডিয়া টাইপ হিসাবে ভুল ব্যাখ্যা থেকে বিরত রাখতে ব্যবহৃত হয় । সঠিকভাবে ব্যবহার করা হলে, পুরানো / অ-সঙ্গতিপূর্ণ ব্রাউজারগুলিকে কেবল স্টাইলিংটি পুরোপুরি উপেক্ষা করা উচিত।
<link rel="stylesheet" media="only screen and (color)" href="example.css" />
একটি পুরানো / অ-সঙ্গতিপূর্ণ ব্রাউজার কেবল কোডের এই লাইনটিকে পুরোপুরি উপেক্ষা করবে, আমি বিশ্বাস করি যেহেতু এটি একমাত্র কীওয়ার্ডটি পড়বে এবং এটিকে একটি ভুল মিডিয়া প্রকার হিসাবে বিবেচনা করবে । ( স্মার্ট ব্যক্তিদের থেকে আরও তথ্যের জন্য এখানে এবং এখানে দেখুন)
আরও তথ্যের জন্য
আরও তথ্যের জন্য (আরও বৈশিষ্ট্য যা জিজ্ঞাসা করা যেতে পারে সেগুলি সহ) দেখুন: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/ মিডিয়া_কিউরিজ # লজিক্যাল_অপারেটর
দ্রষ্টব্য: আমি এখানে প্রতিটি কিছুর জন্য নীচের পরিভাষাটি শিখতে চাইছিলাম, বিশেষত কীওয়ার্ড নয় concerning আমি এটি বুঝতে পারি এখানে এটি:
একটি মিডিয়া বিধি (এমডিএনও এই মিডিয়া বিবৃতিগুলিকে কল বলে মনে করে) @mediaএর আগত সমস্ত মিডিয়া প্রশ্নের সাথে এই শব্দটি অন্তর্ভুক্ত রয়েছে
@media all and (min-width: 800px)
@media only screen and (max-resolution:800dpi), not print
@media screen and (min-width: 700px), (orientation: landscape)
@media handheld, (min-width: 650px), (min-aspect-ratio: 1/1)
একটি মিডিয়া ক্যোয়ারী বৈশিষ্ট্য অনুসন্ধানগুলির একটি সেট। এগুলি একটি বৈশিষ্ট্য ক্যোয়ারির মতোই সহজ হতে পারে বা তারা আরও জটিল কোয়েরি গঠনের জন্য এবং কীওয়ার্ডটি ব্যবহার করতে পারে । মিডিয়া ক্যোয়ারীগুলি আরও জটিল মিডিয়া নিয়মাবলী গঠনের জন্য কমা দ্বারা পৃথক করা যেতে পারে ( উপরের বা কীওয়ার্ডটি দেখুন )।
screen (দ্রষ্টব্য: এখানে ব্যবহৃত কেবলমাত্র একটি বৈশিষ্ট্য ক্যোয়ারী))
only screen
only screen and (max-resolution:800dpi)
only tv and (device-aspect-ratio: 16/9) and (color)
না handheld, (min-width: 650px)। (কমা নোট করুন: এখানে দুটি মিডিয়া প্রশ্ন রয়েছে))
একটি বৈশিষ্ট্য ক্যোয়ারী একটি মিডিয়া নিয়মের সর্বাধিক প্রাথমিক অংশ এবং কোনও প্রদত্ত বৈশিষ্ট্য এবং প্রদত্ত ব্রাউজিং পরিস্থিতিতে তার অবস্থান সম্পর্কে উদ্বেগ প্রকাশ করে।
screen
(min-width: 650px)
(orientation: landscape)
(device-aspect-ratio: 16/9)
কোড স্নিপেট এবং থেকে প্রাপ্ত তথ্য:
মজিলা কন্ট্রিবিউটর দ্বারা সিএসএস মিডিয়া ক্যোয়ারী ( সিসি-বাই-এসএ 2.5 এর অধীন লাইসেন্স প্রাপ্ত )। কিছু কোডের নমুনা (স্পষ্টত) ব্যাখ্যার স্পষ্টতা বাড়াতে সামান্য পরিবর্তনের সাথে ব্যবহার করা হয়েছিল।
CSS এ সঠিক মিডিয়া প্রশ্ন লেখার জন্য দুটি উপায় রয়েছে। আপনি যদি প্রথমে বড় ডিভাইস থেকে মিডিয়া ক্যোয়ারী লিখছেন তবে লেখার সঠিক উপায়টি হ'ল:
@media only screen
and (min-width : 415px){
/* Styles */
}
@media only screen
and (min-width : 769px){
/* Styles */
}
@media only screen
and (min-width : 992px){
/* Styles */
}তবে আপনি যদি প্রথমে ছোট ডিভাইসের জন্য মিডিয়া ক্যোয়ারী লিখছেন তবে তা এমন কিছু হবে:
@media only screen
and (max-width : 991px){
/* Styles */
}
@media only screen
and (max-width : 768px){
/* Styles */
}
@media only screen
and (max-width : 414px){
/* Styles */
}