क्या केवल HTML और media queries के साथ स्क्रीन का आकार बदलने पर div बनाना संभव है?

उदाहरण के लिए, मैं जो हासिल करने की कोशिश कर रहा हूं उसका एक दृश्य यहां दिया गया है: यहां छवि विवरण दर्ज करें

मुद्दा यह है कि मेरी संरचना में, मेरे पास एक पैरेंट डिव में लोगो डिव और नेविगेशन दोनों हैं, लेकिन जब स्क्रीन का आकार बदला जाता है, तो मैं चाहता हूं कि नेविगेशन डिव एक अलग इकाई हो (विभिन्न शैलियों के साथ)

यहाँ मेरी वर्तमान div संरचना है:

nav-container
   logo-holder
   navigation-div
      nav

क्या यह संभव है? यहाँ मेरा वर्तमान दृष्टिकोण है:

html,
body {
  height: 100%;
  background-color: #fff;
}

body {
  background-color: #fff;
  text-align: center;
  margin: 0;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  display: block;
}

.site-wrapper {
  width: 100%;
  height: 100%;
  min-height: 100%;
  -webkit-box-shadow: inset 0 0 5rem rgba(0, 0, 0, .5);
  box-shadow: inset 0 0 5rem rgba(0, 0, 0, .5);
  display: flex;
  flex-wrap: wrap;
}

.nav-container {
  border-right: 0.5px solid #333;
  height: 100%;
  width: 200px;
  background-color: #333;
  display: flex;
  justify-content: center;
  align-items: center;
}

.logo-holder {
  position: absolute;
  top: 0;
  text-align: center;
}

#navigation-div {
  margin-top: -300px;
  width: 100%;
}

.nav-ul li a {
  display: block;
}

.nav-link {
  width: 100%;
  display: block;
  text-align: left;
  color: #fff;
  text-decoration: none;
  margin-left: 0px;
  padding-left: 15px;
}

.nav-link:hover {
  background-color: #fff;
  color: #333;
}

.nav ul {
  width: 100%;
  padding-left: 0px;
}

.nav ul li {
  list-style-type: none;
  width: 100%;
  font-family: 'Oswald', sans-serif;
  font-size: 1.2em;
  height: 25px;
}

.nav ul li a {
  text-align: left;
  padding: 5px;
  color: #fff;
  text-decoration: none;
  margin-left: 15px;
}

@media screen and (max-width: 540px) {
  .nav-container {
    width: 100%;
    height: 160px;
    background-color: #333;
    border-bottom: 0.5px solid #333;
  }
  .nav-container nav,
  .nav-container nav ul,
  .nav-container nav ul li,
  .logo-holder {
    display: inline;
  }
  .logo-holder {
    overflow: hidden;
    display: block;
    margin: auto;
    width: 40%;
  }
  #navigation-div {
    border: 1px solid red;
  }
  .responsive {
    width: 100%;
    height: 160px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .nav {
    overflow: hidden;
    list-style: none;
    background-color: #444;
    text-align: center;
    padding: 0;
    margin: 0;
  }
  .nav ul li {
    font-size: 1.2em;
    line-height: 20px;
    height: 20px;
    border-bottom: 1px solid #888;
    float: left;
  }
  .nav ul li a {
    text-align: center;
    text-decoration: none;
    color: #fff;
    display: block;
    transition: .3s;
  }
  /* on screen resize make new div appear */
}
<div class="site-wrapper">

  <div class="nav-container responsive">
    <div class="logo-holder">
      <img class="user-select-none" src="images/temp-logo.jpeg" alt="temp" />
    </div>
    <div id="navigation-div">
      <nav class="nav">
        <ul class="nav-ul">
          <a class="nav-link active" href="">
            <li>Home</li>
          </a>
          <a class="nav-link" href="">
            <li>Blog</li>
          </a>
          <a class="nav-link" href="">
            <li>Store</li>
          </a>
          <a class="nav-link" href="">
            <li>Contact</li>
          </a>
        </ul>
      </nav>
    </div>
  </div>
</div>
0
Freddy 6 अक्टूबर 2017, 17:48
आपको 2 एनएवी-कंटेनरों की आवश्यकता है। 1 मोबाइल के लिए और 1 वेब के लिए। फिर मीडिया के प्रश्नों के साथ दिखाएं/छुपाएं।
 – 
tomsmithweb
6 अक्टूबर 2017, 17:55

2 जवाब

इस खंड के लिए दो अलग-अलग HTML संरचनाओं पर विचार करें।

एक डिव डेस्कटॉप परोसता है। दूसरा मोबाइल परोसता है।

जब डेस्कटॉप संस्करण सक्रिय होता है, तो मोबाइल संस्करण में display: none होता है। और इसके विपरीत।

यह कैसे काम करता है इसका एक सरल उदाहरण यहां दिया गया है:

#large-image { display: block; }
#small-image { display: none; }

@media (max-width: 500px) {
    #large-image { display: none; }
    #small-image { display: block; }
}
<div>
  <img id="large-image" src="http://i.imgur.com/60PVLis.png" height="200" width="200" alt="">
  <img id="small-image" src="http://i.imgur.com/60PVLis.png" height="50" width="50" alt="">
</div>

जेएसफ़िल्ड डेमो

1
Michael Benjamin 6 अक्टूबर 2017, 18:02

आप jQuery का उपयोग करके इस तरह एक div जोड़ सकते हैं

jQuery(window).resize(function(){
$('body').append('<div style="background-color:red,height:20px;width:20px">This is your Div</div>');
});

मीडिया क्वेरी के साथ आप विंडो के आकार के आधार पर किसी भी डिव को दिखा या छिपा सकते हैं

उदाहरण के लिए:

<div id="foo" style="display:none;height:20px;width:20px;"></div>

मैं इस डिव को दिखाना चाहता हूं जब स्क्रीन का आकार 767px से कम है

यह कुछ हद तक काम करता है, लेकिन अब जब मैं इसे सादे पाठ प्रारूप में देखता हूं, न कि json @spickermann

  @@media only screen and (max-width: 767px) {
#foo{
display:block;
}
}

आप इस कॉन्सेप्ट चीयर्स से ले सकते हैं और विचार कर सकते हैं

0
LSKhan 6 अक्टूबर 2017, 17:59