আমি ক্লাস তৈরি করতে CSS3 মিডিয়া ক্যোয়ারীগুলি ব্যবহার করার চেষ্টা করছি যা প্রস্থটি 400px এর চেয়ে বেশি এবং 900px এর চেয়ে কম হলেই প্রদর্শিত হয়। আমি জানি এটি সম্ভবত খুব সহজ এবং আমি স্পষ্ট কিছু মিস করছি, তবে আমি এটি বের করতে পারি না। আমি যা নিয়ে এসেছি তা হল নীচের কোডটি, কোনও সহায়তার প্রশংসা করুন।
@media (max-width:400px) and (min-width:900px) {
.class {
display: none;
}
}উত্তর:
আপনার মানগুলি পরিবর্তন করতে হবে:
/* No greater than 900px, no less than 400px */
@media (max-width:900px) and (min-width:400px) {
.foo {
display:none;
}
}ডেমো: http://jsfiddle.net/xf6gA/ (পটভূমি রঙ ব্যবহার করে, তাই এটি নিশ্চিত করা সহজ)
@Jonathan স্যাম্পসন আমি মনে করি আপনার সমাধান ভুল হলে আপনি একাধিক ব্যবহার @media ।
আপনার ব্যবহার করা উচিত ( সর্বনিম্ন প্রস্থে ):
@media screen and (min-width:400px) and (max-width:900px){
...
}andপরে প্রথমটি ভুলে গিয়েছিলাম @media screen। প্রথমটি Inোকানো andআমার জন্য এটি ঠিক করা।
শুধু .scssএখানে আমার উদাহরণটি রেখে যেতে চেয়েছিলাম , আমি মনে করি এটির সর্বোত্তম অনুশীলন, বিশেষত আমি মনে করি আপনি যদি কাস্টমাইজেশনটি করেন তবে মাত্র একবার প্রশস্ততা সেট করা ভাল! এটি সর্বত্র প্রয়োগ করা চালাক নয়, আপনি মানবিক গুণকে তাত্পর্যপূর্ণভাবে বাড়িয়ে তুলবেন।
আমি আপনার মতামতের জন্য অপেক্ষা করছি!
// Set your parameters
$widthSmall: 768px;
$widthMedium: 992px;
// Prepare your "function"
@mixin in-between {
@media (min-width:$widthSmall) and (max-width:$widthMedium) {
@content;
}
}
// Apply your "function"
main {
@include in-between {
//Do something between two media queries
padding-bottom: 20px;
}
}.class {
display: none;
}
@media (min-width:400px) and (max-width:900px) {
.class {
display: block; /* just an example display property */
}
}
max-widthএবংmin-widthবিপরীত করা উচিত। এই