Question

使用HTML和media queries调整屏幕大小时是否可以创建div？

例如，这里是我想要实现的目标：

问题在于，在我的结构中，我在一个父div中同时具有徽标div和导航，但是当调整屏幕大小时，我希望导航div成为一个单独的实体（具有不同的样式）

这是我目前的div结构：

nav-container
   logo-holder
   navigation-div
      nav

有可能吗？这是我目前的做法：

＆＃13;

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 */
}

＆＃13;

<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>

＆＃13;

Answer 1

考虑本节的两个单独的HTML结构。

一个div服务于桌面。另一个是移动设备。

桌面版本处于活动状态时，移动版本为display: none。反之亦然。

以下是一个简单示例：

＆＃13;

#large-image { display: block; }
#small-image { display: none; }

@media (max-width: 500px) {
    #large-image { display: none; }
    #small-image { display: block; }
}

＆＃13;

<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>

＆＃13;

jsFiddle demo

Answer 2

您可以使用jQuery

添加这样的div

'\\'

使用媒体查询，您可以根据窗口大小显示或隐藏任何Div

例如：

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

我想在屏幕尺寸小于767px时显示此div

使用媒体查询

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

你可以从这个概念中获取和想法干杯

在调整屏幕大小时创建div

2 个答案: