相对div内的CSS响应式绝对div

Question

我对CSS相对较新，我正在尝试构建一个原型，在该原型中我有一个大Div，其中特定位置有几个div。我希望这些div始终占据那个位置，但是我希望它能够快速响应。

在尝试了几种不同的方法之后，我的代码有点遍地开花，但是黄色的div是我要制作的。我想将所有其他div循环放置，但希望它们始终使用父div的空间的百分比并缩小，但保持与父div相同的“相对”位置。

var openSide = false;

function side() {
  if (!openSide) {

    document.getElementById("main").style.marginLeft = "15%";
    document.getElementById("main").style.paddingLeft = "10px";
    document.getElementById("mySidebar").style.width = "15%";
    document.getElementById("mySidebar").style.display = "block";
    // document.getElementById("openNav").style.display = 'none
    openSide = true;
  } else {
    document.getElementById("main").style.marginLeft = "0%";
    document.getElementById("mySidebar").style.display = "none";
    document.getElementById("openNav").style.display = "inline-block";
    openSide = false;
  }

  console.log(openSide);
}

/* The sidebar menu */

.sidenav {
  /*/height: 100%; /* Full-height: remove this if you want "auto" height */
  width: 15%;
  /* Set the width of the sidebar */
  position: fixed;
  /* Fixed Sidebar (stay in place on scroll) */
  z-index: 1;
  /* Stay on top */
  top: 70;
  /* Stay at the top */
  left: 0;
  background-color: #111;
  /* Black */
  overflow-x: hidden;
  /* Disable horizontal scroll */
  padding-top: 20px;
  display: none;
  margin-left: 10px;
}


/* The navigation menu links */

.sidenav a {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
}


/* When you mouse over the navigation links, change their color */

.sidenav a:hover {
  color: #f1f1f1;
}


/* Style page content */

#main {
  margin-left: 0%;
  /* Same as the width of the sidebar */
  margin-right: 15%;
  padding-left: 10px;
  padding-right: 20px;
}

body {
  margin-left: 10px;
}

.flex-container {
  display: flex;
  background-color: DodgerBlue;
}

.flex-container>div {
  background-color: red;
  margin: 10px;
  padding: 20px;
  font-size: 30px;
}

#map {
  /*padding: 100px 100px 100px 100px;*/
  position: relative;
  width: 100%;
  height: 600px;
  top: 100px;
  background: yellow;
}

.media {
  position: absolute;
  width: 11.07%;
  height: 16.66%;
  background-color: red;
}

.media:first-child {
  margin-top: 15;
}

#m1 {
  background: blue;
  left: 400px;
  top: 400px;
}

.media:hover {
  background-color: pink;
  z-index: 1000;
  width: 200px;
  height: 200px;
}


/* On smaller screens, where height is less than 450px, change the style of the sidebar (less padding and a smaller font size) */

@media screen and (max-height: 450px) {
  .sidenav {
    padding-top: 15px;
  }
  .sidenav a {
    font-size: 18px;
  }
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="assets/css/css.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<button id="openNav" class="w3-button w3-teal w3-xlarge" onclick="side()">&#9776;</button>

<div id="header">
  <nav class="navbar navbar-inverse">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
    	        <span class="icon-bar"></span>
    	        <span class="icon-bar"></span>
    	        <span class="icon-bar"></span>                        
    	      </button>
        <a class="navbar-brand" href="#">WebSiteName</a>
      </div>
      <div class="collapse navbar-collapse" id="myNavbar">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#">Page 2</a></li>
          <li><a href="#">Page 3</a></li>
        </ul>
      </div>
    </div>
  </nav>
</div>




<!-- Side navigation -->
<div class="sidenav" id="mySidebar">
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Clients</a>
  <a href="#">Contact</a>
</div>



<div id="main">

  <div class="flex-container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>



  <div id="map">
    <div class="container">

      <div class="media" style="left:465px;top:340px; background:red;">h</div>
      <div class="media" style="left:530px;top:250px; background:blue;">g</div>
      <div class="media" style="left:465px;top:175px;background:green ">f</div>
      <div class="media" style="left:400px;top:100px;background:red">e</div>
      <div class="media" style="left:335px;top:175px; background:blue">d</div>
      <div class="media" style="left:270px;top:250px; background:green;">c</div>
      <div class="media" style="left:335px;top:325px;">b</div>
      <div class="media" id="m1">a</div>
    </div>
  </div>

  <div class='circle-container'>
    <a href='#' class='center'><img src='image.jpg'></a>
    <a href='#' class='deg0'><img src='image.jpg'></a>
    <a href='#' class='deg45'><img src='image.jpg'></a>
    <a href='#' class='deg135'><img src='image.jpg'></a>
    <a href='#' class='deg180'><img src='image.jpg'></a>
    <a href='#' class='deg225'><img src='image.jpg'></a>
    <a href='#' class='deg315'><img src='image.jpg'></a>
  </div>

  <div class="jumbotron text-center" style="margin-bottom:0">
    <p>Footer</p>
  </div>


</div>

Answer 1

正如其他评论者所指出的那样，在此处包含元素的位置和尺寸都使用%是一个好方法。

您还可以使用vmin来建立width的{​​{1}}和height，以确保视口是水平还是垂直减小，在全部。

工作示例：

.container

.container {
position: relative;
width: 100vmin;
height: 100vmin;
background-color: yellow;
}

.container div {
position: absolute;
width: 6%;
height: 9%;
transform: translateX(-50%);
}

.a {
top: 60%;
left: 50%;
background-color: blue;
}

.b {
top: 52%;
left: 40%;
background-color: red;
}

.c {
top: 44%;
left: 30%;
background-color: green;
}

.d {
top: 36%;
left: 40%;
background-color: blue;
}

.e {
top: 28%;
left: 50%;
background-color: red;
}

.f {
top: 36%;
left: 60%;
background-color: green;
}

.g {
top: 44%;
left: 70%;
background-color: blue;
}

.h {
top: 52%;
left: 60%;
background-color: red;
}