क्या एचटीएमएल और सीएसएस के साथ ऐसा करने का कोई तरीका है या क्या मैं इसे केवल जावास्क्रिप्ट/बूटस्ट्रैप के साथ कर सकता हूं? मैं कोडिंग के लिए बिल्कुल नया हूं, यदि संभव हो तो विस्तृत स्पष्टीकरण अच्छा होगा!

-2
Samiksha 17 मई 2020, 23:34

3 जवाब

आप अलग-अलग डिवाइस साइज में कोड दिखाने या छिपाने के लिए @media स्क्रीन की मदद से शो को हाइड कर सकते हैं।

उदाहरण:

@media screen and (max-width: 767px) {
  .hide_on_mobile {
    display: none;
  }
}
@media screen and (min-width: 768px) {
  .hide_on_mobile {
    display: block;
  }
}
0
Kamran Kazmi 17 मई 2020, 23:43

हाँ आप कर सकते हैं।

ऐसा करने के लिए कई दृष्टिकोण हैं

  1. डिटेक्ट डिवाइस टच करने योग्य है (उदाहरण के लिए मॉडर्निज़र जैसे टूल्स के साथ) - मैं अनुशंसा नहीं करता, क्योंकि आजकल इवेंट लैपटॉप टच डिस्प्ले के साथ प्रदान किए जाते हैं।
  2. डिवाइस के व्यूपोर्ट के अनुसार - यह रही अच्छी टेबल सूची Adobe द्वारा सर्वाधिक लोकप्रिय डिवाइस व्यूपोर्ट के साथ

मुझे दूसरा तरीका पसंद है

तो समाधान CSS Media-queries

और मोबाइल पहले तकनीकें

उदाहरण (स्निपेट चलाने के बाद यह देखने के लिए कि यह डेस्कटॉप में कैसा दिखेगा, Full page बटन दबाएं)

<style>
  #navbar {
    display: none;
  }

  @media (min-width: 640px) {
    #navbar {
      background: lightblue;
      height: 60px;
    }
  }

  main {
    background: #ccc;
    min-height: 40vh;
  }
</style>
<div id="navbar"></div>
<main></main>
0
java-man-script 17 मई 2020, 23:47

आप इसे सीएसएस मीडिया क्वेरी के साथ कर सकते हैं। अगर आप शुरुआत कर रहे हैं तो उस CSS मीडिया क्वेरी पर एक छोटा ट्यूटोरियल है।

मोबाइल डिवाइस के आकार के अनुसार आप नेवबार को छुपा सकते हैं।

उदाहरण:

@media only screen and (max-width: 600px) {
  .navbar{
      display:none;
  }
}
0
Ahsan Ullah 17 मई 2020, 23:41