সিএসএস মিডিয়া ক্যোয়ারী ওভারল্যাপের জন্য নিয়ম কী?
ক্যাসকেড।
@mediaবিধিগুলি ক্যাসকেডের জন্য স্বচ্ছ, সুতরাং যখন @mediaএকই সময়ে দুটি বা ততোধিক নিয়ম মেলে, ব্রাউজারের সাথে মেলে সমস্ত নিয়মে শৈলী প্রয়োগ করা উচিত এবং সেই অনুসারে ক্যাসকেডটি সমাধান করা উচিত। ঘ
সমস্ত সমর্থনকারী ব্রাউজারগুলিতে, ঠিক 20 মিনিটে এবং 45 মিনিটে কী হবে?
ঠিক 20 মিমি প্রশস্তভাবে, আপনার প্রথম এবং দ্বিতীয় মিডিয়া ক্যোয়ারী উভয়ই মিলবে। ব্রাউজারগুলি @mediaতদনুসারে উভয় নিয়ম এবং ক্যাসকেডগুলিতে স্টাইল প্রয়োগ করবে , সুতরাং যদি কোনও বিবাদী নিয়ম যদি ওভাররাইড করা প্রয়োজন হয় তবে সর্বশেষ ঘোষিত একটি জয় (নির্দিষ্ট নির্বাচকদের জন্য অ্যাকাউন্টিং !important, ইত্যাদি)। একইভাবে দ্বিতীয় এবং তৃতীয় মিডিয়া ক্যোয়ারির জন্য যখন ভিউপোর্টটি প্রায় 45 মি প্রশস্ত হয়।
কিছু প্রকৃত শৈলীর বিধি যুক্ত করে আপনার উদাহরণ কোড বিবেচনা করে:
@media (max-width: 20em) {
.sidebar { display: none; }
}
@media (min-width: 20em) and (max-width: 45em) {
.sidebar { display: block; float: left; }
}
যখন ব্রাউজারের ভিউপোর্টটি প্রায় 20 ম প্রশস্ত হয়, তখন উভয় মিডিয়া অনুসন্ধানই সত্য হয়ে উঠবে। ক্যাসকেড দ্বারা, display: blockওভাররাইড display: noneএবং float: leftশ্রেণীর সাথে যে কোনও উপাদানগুলিতে প্রয়োগ হবে .sidebar।
আপনি এটিকে নিয়ম প্রয়োগ হিসাবে ভাবতে পারেন যেন মিডিয়া কোয়েরিগুলি শুরু করার জন্য নেই:
.sidebar { display: none; }
.sidebar { display: block; float: left; }
যখন ব্রাউজার দুটি বা তার বেশি মিডিয়া প্রশ্নের সাথে মেলে তখন ক্যাসকেডটি কীভাবে ঘটে তার আরেকটি উদাহরণ এই অন্য উত্তরে পাওয়া যাবে ।
সতর্ক, যদিও, যে আপনি যদি ঘোষণা আছে না উভয় ওভারল্যাপ @mediaবিধি, তারপর সমস্ত নিয়ম প্রযোজ্য হবে। এখানে যা ঘটে তা হ'ল উভয় নিয়মে ঘোষণার একটি ইউনিয়ন@media , কেবল পরেরটি পুরোপুরি পুরোপুরি ছাপিয়ে যায় না ... যা আমাদের আপনার আগের প্রশ্নটিতে নিয়ে আসে:
ওভারল্যাপ এড়ানোর জন্য আমরা কীভাবে মিডিয়া প্রশ্নগুলিকে নির্ভুলভাবে আউট করব?
আপনি যদি ওভারল্যাপ এড়াতে চান, তবে আপনাকে কেবল মিডিয়া প্রশ্নগুলি লিখতে হবে যা পারস্পরিক একচেটিয়া।
মনে রাখবেন যে min-এবং max-উপসর্গটির অর্থ "সর্বনিম্ন অন্তর্ভুক্ত" এবং "সর্বাধিক অন্তর্ভুক্ত"; এর অর্থ (min-width: 20em)এবং (max-width: 20em)উভয়ই এমন ভিউপোর্টের সাথে মিলবে যা প্রায় 20 ম প্রশস্ত।
দেখে মনে হচ্ছে আপনার ইতিমধ্যে একটি উদাহরণ রয়েছে, যা আমাদের আপনার শেষ প্রশ্নে নিয়ে আসে:
আমি লোকদের ব্যবহার করতে দেখেছি: 799px এবং তারপরে 800px এর মতো জিনিস, তবে 7৯৯.৫ পিক্সারের পর্দার প্রস্থের কী হবে? (স্পষ্টতই কোনও নিয়মিত প্রদর্শনীতে নয়, তবে একটি রেটিনা রয়েছে?)
এটি আমি পুরোপুরি নিশ্চিত নই; সিএসএসে সমস্ত পিক্সেল মান লজিকাল পিক্সেল এবং একটি ব্রাউজার খুঁজে পেতে আমার উপর চাপ দেওয়া হয়েছে যা ভিউপোর্টের প্রস্থের জন্য ভগ্নাংশের পিক্সেল মানের প্রতিবেদন করবে। আমি কিছু আইফ্রেমে পরীক্ষার চেষ্টা করেছি তবে কিছুই নিয়ে আসতে সক্ষম হইনি।
আমার পরীক্ষায় থেকে সাফারি মনে হবে উপর আইওএস সব ভগ্ন পিক্সেল মান চক্রের তা নিশ্চিত করার জন্য এর হয় এক max-width: 799pxএবং min-width: 800pxম্যাচ হবে, এমনকি যদি ভিউপোর্ট সত্যিই 799.5px (যা দৃশ্যত সাবেক মেলে)।
1 যদিও এর কোনটিই শর্তাধীন বিধিমালা মডিউল বা ক্যাসকেড মডিউলে (যার পরবর্তীকালে বর্তমানে পুনর্লিখনের জন্য প্রস্তুত রয়েছে) তেমন স্পষ্টভাবে কিছু বলা হয়নি , তবে ক্যাসকেডটি সাধারণত সঞ্চালিত বলেই বোঝানো হয়, যেহেতু অনুমানটি কেবল স্টাইল প্রয়োগ করতে বলে। এবং @mediaব্রাউজার বা মিডিয়ার সাথে মেলে এমন সমস্ত বিধি।