इसलिए मैं बूटस्ट्रैप का उपयोग करके अपनी व्यक्तिगत साइट का निर्माण कर रहा हूं। वर्तमान में मैं सामग्री को मोबाइल आकारों में फिट करने की कोशिश कर रहा हूं।
मेरी समस्या यह है कि मैं कैसे उपयोग करने के लिए काफी याद नहीं कर सकता हूं queries और जिस तरह से मैं कर रहा हूँ वह एक निश्चित बिंदु पर काम करना बंद कर देता है।
तो मूल रूप से मैं क्या कर रहा हूँ मोबाइल सीएसएस शैली को मुख्य सीएसएस में डाल रहा है, फिर इसे बदल रहा है क्योंकि स्क्रीन बड़ी हो जाती है।
लेकिन कुछ कारणों से प्रश्नों के बाद काम करना बंद कर देता है 992px.
क्या ऐसा करने का एक बेहतर तरीका है जो काम करेगा और अधिक समझ में आएगा।
उत्तर:
जवाब के लिए 2 № 1यहां बताया गया है कि आपको कैसे उपयोग करना चाहिए मीडिया के प्रश्नों:
याद रखें उन आकारों का उपयोग करें जिन्हें आप पसंद करते हैं / आवश्यकता है। यह नीचे डेमो उद्देश्यों के लिए है।
गैर-मोबाइल पहला तरीका का उपयोग करते हुए max-width:
/*========== Non-Mobile First Method ==========*/
@media only screen and (max-width: 960px) {
/*your CSS Rules*/
}
@media only screen and (max-width: 768px) {
/*your CSS Rules*/
}
@media only screen and (max-width: 640px) {
/*your CSS Rules*/
}
@media only screen and (max-width: 480px) {
/*your CSS Rules*/
}
@media only screen and (max-width: 320px) {
/*your CSS Rules*/
}
मोबाइल पहला तरीका का उपयोग करते हुए min-width:
/*========== Mobile First Method ==========*/
@media only screen and (min-width: 320px) {
/*your CSS Rules*/
}
@media only screen and (min-width: 480px) {
/*your CSS Rules*/
}
@media only screen and (min-width: 640px) {
/*your CSS Rules*/
}
@media only screen and (min-width: 768px) {
/*your CSS Rules*/
}
@media only screen and (min-width: 960px) {
/*your CSS Rules*/
}
यहाँ एक अच्छा है ट्यूटोरियल W3.org से