मैं एक वर्ग बनाने के लिए 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/ (पृष्ठभूमि रंग का उपयोग करना, ताकि पुष्टि करना आसान हो)
यदि आप कई @मीडिया का उपयोग करते हैं तो @ जोनाथन सैम्पसन मुझे लगता है कि आपका समाधान गलत है ।
आपको उपयोग करना चाहिए ( न्यूनतम-चौड़ाई पहले ):
@media screen and (min-width:400px) and (max-width:900px){
...
}
andबाद भूल गया था @media screen। 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उलटा होना चाहिए। यह तरीका और अधिक पठनीय है