উত্তর:
এটি একটি মিডিয়া ক্যোয়ারী। এটি ব্রাউজারের থাকা পরীক্ষাগুলি পাস না করলে এটি এর অভ্যন্তরের সিএসএসকে চালানো থেকে বাধা দেয়।
এই মিডিয়া ক্যোয়ারীতে পরীক্ষাগুলি হ'ল:
@media screen- ব্রাউজার নিজেকে "স্ক্রিন" বিভাগে হিসাবে চিহ্নিত করে। এই মোটামুটিভাবে মানে ব্রাউজার নিজেই বিবেচনা করে ডেস্কটপে ক্লাসের - হিসাবে একটি যেমন উল্টোদিকে পুরোনো মোবাইল ফোন ব্রাউজার (নোট যে আইফোন, এবং অন্যান্য স্মার্টফোনের ব্রাউজার, না নিজেদের পর্দা বিষয়শ্রেণীতে অন্তর্ভুক্ত হচ্ছে চিহ্নিত), অথবা স্ক্রিনরিডার - এবং এটি প্রদর্শন করার যে পৃষ্ঠাটি স্ক্রিন না করে অন স্ক্রিনে।
max-width: 1024px- ব্রাউজার উইন্ডোটির প্রস্থ (স্ক্রোল বার সহ) 1024 পিক্সেল বা তার চেয়ে কম। ( সিএসএস পিক্সেল, ডিভাইস পিক্সেল নয় ))
এই দ্বিতীয় পরীক্ষার পরামর্শ দেয় এটি আইপ্যাড, আইফোন এবং অনুরূপ ডিভাইসগুলিতে সিএসএস সীমাবদ্ধ করার উদ্দেশ্যে করা হয়েছে (কারণ কিছু পুরানো ব্রাউজারগুলি সমর্থন করে না max-width মিডিয়া ক্যোয়ারিতে না, এবং অনেকগুলি ডেস্কটপ ব্রাউজার 1024 পিক্সেলের চেয়েও বেশি প্রশস্ত হয়)।
তবে এটি সমর্থন করে এমন ব্রাউজারগুলিতে 1024 পিক্সেলের চেয়ে কম প্রশস্ত ডেস্কটপ ব্রাউজার উইন্ডোজগুলিতেও প্রযোজ্য max-width মিডিয়া ক্যোয়ারী ।
এখানে মিডিয়া ক্যোয়ারিজের অনুমান, এটি বেশ পঠনযোগ্য:
এটি সেখানে স্ক্রিনে সংজ্ঞায়িত শৈলীর সীমাবদ্ধ করে (যেমন মুদ্রণ বা অন্য কোনও মিডিয়া নয়) এবং আরও 1024 পিক্স বা এর চেয়ে কম প্রস্থের ভিউপোর্টগুলিতে সীমাবদ্ধ করে চলেছে।
এটি বলে: পৃষ্ঠাটি প্রস্থে সর্বোচ্চ 1024 পিক্সেলের রেজোলিউশনে স্ক্রিনে রেন্ডার হয়ে যায় তারপরে অনুসরণ করা নিয়মটি প্রয়োগ করুন।
আপনি ইতিমধ্যে জেনে থাকতে পারেন বাস্তবে আপনি কোনও মিডিয়া টাইপের জন্য কয়েকটি সিএসএস লক্ষ্যবস্তু করতে পারেন যা হ্যান্ডহেল্ড, স্ক্রিন, প্রিন্টার ইত্যাদির মধ্যে একটি হতে পারে।
একটি চেহারা আছে এখানে বিস্তারিত জানার জন্য ..
আমার ক্ষেত্রে যখন আমি ব্রাউজারটি 800pxকম বা তার চেয়ে কম হয় তখন একটি ওয়েবসাইটটিতে আমার লোগোটি কেন্দ্র করে নিতে চেয়েছিলাম , তবে আমি @mediaট্যাগটি ব্যবহার করে এটি করেছি :
@media screen and (max-width: 800px) {
#logo {
float: none;
margin: 0;
text-align: center;
display: block;
width: auto;
}
}এটি আমার পক্ষে কাজ করেছে, আশা করি কেউ এই সমাধানটিকে দরকারী বলে মনে করছেন। :) আরও তথ্যের জন্য দেখুন এই ।
এটা মিডিয়া ক্যোয়ারী । এটি আপনাকে নির্দিষ্ট কনফিগারেশনের নির্দিষ্ট ডিভাইসগুলিতে CSS নিয়মের কিছু অংশ প্রয়োগ করতে দেয়।
এর অর্থ যদি পর্দার আকার 1024 হয় তবে কেবল সিএসএস বিধিগুলির নীচে প্রয়োগ করুন।
যদি আপনার মিডিয়া ক্যোয়ারী শর্তটি সত্য হয় তবে সেই শর্ত সহ আপনার সিএসএস কাজ করবে। তার মানে আপনার মিডিয়া ক্যোয়ারীর শর্তের মধ্যে পিক্সেল আকারের সিএসএস কার্যকর হবে, অন্যথায় যদি শর্তটি ব্যর্থ হয় তবে ডিভাইসের প্রস্থ যদি আপনার সিএসএসের চেয়ে 1024 পিক্সেলের বেশি হয় তবে আপনার মিডিয়া ক্যোয়ারী শর্তটি মিথ্যা বলে।
max-width প্রস্থ পর্যন্ত আপনার সর্বাধিক সিএসএস সীমা।
আপনি 'ইম' পাশাপাশি 'পিএক্স' ব্যবহার করতে পারেন - লক্ষণীয় যে ব্লগ এবং পাঠ্য ভিত্তিক সাইটগুলি এটি করে কারণ ব্রাউজারটি পাঠ্যের সামগ্রীর তুলনায় বিন্যাসের সিদ্ধান্তগুলিকে আরও সম্পর্কিত করে।
ওয়ার্ডপ্রেস টোয়েন্টি সিক্সটিনে আমি চাইছিলাম যে আমার ট্যাগলাইনটি মোবাইলের পাশাপাশি ডেস্কটপগুলিতে প্রদর্শিত হোক, তাই আমি এটি আমার চাইল্ড থিমের স্টাইলে রেখেছি ss
@media screen and (max-width:59em){
p.site-description {
display: block;
}
}এটি কিছু অন্যান্য কোডগুলি কার্যকর করতে নির্দিষ্ট কিছু বৈশিষ্ট্যকে লক্ষ্যবস্তু করে ...
উদাহরণ স্বরূপ:
@media all and (max-width: 600px) {
.navigation {
-webkit-flex-flow: column wrap;
flex-flow: column wrap;
padding: 0;
}উপরের স্নিপেটটি বলে যে এই ডিভাইসটি চালাচ্ছে এমন ডিভাইসটির স্ক্রিন যদি 600px বা 600px প্রস্থের কম হয় তবে এই ক্ষেত্রে আমাদের প্রোগ্রামটিকে অবশ্যই এই অংশটি কার্যকর করতে হবে।