如何获取专门定位的 div 以根据浏览器宽度正确调整大小

Question

有没有办法让 div 容器在容器开始触及浏览器侧面时（如果浏览器变小）响应式缩小......而不是仅在达到媒体查询宽度设置时才执行此操作？

目前我的容器在左侧或右侧被切断，并且只有在媒体查询将边距设置为 0 时才会“修复”。有什么想法吗？

代码如下。是否值得在全尺寸上查看更大，并将浏览器宽度调整为更小以查看内容如何被截断？

body {
  background-color: whitesmoke;
  margin: 20px;
  padding: 0;
  font-family: 'Times New Roman', Times, serif;
  font-size: 16px;
  line-height: 1.2;
}


/* Link styles */

a {
  color: blue;
  /* Set link color to blue */
  text-decoration: none;
  /* Remove default underline */
}


/* Hover and active link styles */

a:hover,
a:active,
a:focus {
  text-decoration: underline;
  /* Underline link on hover, click, or focus */
}

.container {
  background-color: ;
  margin-bottom: 80px;
  padding: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  /* Change flex direction to column */
  position: relative;
  /* Add position relative */
  margin-top: 0px;
  /* Add margin-top for spacing */
}


/* Custom CSS for text boxes */

.textbox {
  background-color: white;
  max-width: 600px;
  padding: 10px;
  margin-top: 20px;
  /* Add margin-top for spacing */
  margin-left: auto;
  /* Align to the right */
  margin-bottom: 0px;
  /* Add margin-bottom for spacing */
  text-align: left;
  /* Align text to the left */
}


/* Media query for positioning and scaling the second container */

@media screen and (max-width: 700px) {
  .first-container,
  .second-container {
    margin-left: 0;
    /* Reset margin-left */
    margin-right: 0;
    /* Reset margin-left */
  }
}

@media screen and (min-width: 700px) {
  .first-container {
    margin-left: 8%;
    /* Position from the left */
  }
  .second-container {
    margin-right: 8%;
    /* Position from the right */
  }
}

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

<div class="container first-container" style="max-width: 800px">
  <div style="background-color: orange; width: 100%">
    Content / text/ images
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  </div>

  <div class="textbox">
    Lorem ipsum
  </div>
</div>

<div class="container second-container" style="max-width: 600px">
  <div style="background-color: lightcoral; width: 100%">
    Content / text/ images
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  </div>

  <div class="textbox">
    Lorem ipsum
  </div>
</div>

Answer 1

您可以通过结合使用 CSS

calc()

函数和视口宽度单位

vw

来实现此目的。

    body {
  background-color: whitesmoke;
  margin: 20px;
  padding: 0;
  font-family: 'Times New Roman', Times, serif;
  font-size: 16px;
  line-height: 1.2;
}

/* Link styles */
a {
  color: blue; /* Set link color to blue */
  text-decoration: none; /* Remove default underline */
}

/* Hover and active link styles */
a:hover,
a:active,
a:focus {
  text-decoration: underline; /* Underline link on hover, click, or focus */
}

.container {
  box-sizing: border-box; /* Include padding and border in element's total width and height */
  width: calc(100% - 40px); /* Set width to 100% minus the total horizontal padding */
  max-width: 800px; /* Set max-width to 800px */
  margin-bottom: 80px;
  padding: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column; /* Change flex direction to column */
  position: relative; /* Add position relative */
  margin-top: 0px; /* Add margin-top for spacing */
}

/* Custom CSS for text boxes */
.textbox {
  background-color: white;
  max-width: 600px;
  padding: 10px;
  margin-top: 20px; /* Add margin-top for spacing */
  margin-left: auto; /* Align to the right */
  margin-bottom: 0px; /* Add margin-bottom for spacing */
  text-align: left; /* Align text to the left */
}

/* Media query for positioning and scaling the second container */
@media screen and (min-width: 700px) {
  .first-container {
    margin-left: calc(8vw - 20px); /* Position from the left */
  }
  .second-container {
    margin-right: calc(8vw - 20px); /* Position from the right */
  }
}