Html 减小浏览器窗口大小时动态减小节的宽度

我有一个具有以下特征的html文件部分：

section {
background:blanchedalmond;
width: 50%;
height: 75%;
margin: 200px auto 0;
margin-top: 50px;
font-family: 'Courier New';
line-height: 150%;
font-weight: bold;
text-align: justify;
font-size: 100%;
vertical-align: middle;
}

基本上，当我缩小窗口的大小时，需要逐渐缩小外部的空白空间，并且只在没有空白的时候开始缩小“截面”的大小：

---

如果我们知道屏幕宽度发生变化，可以调整容器的

宽度。所以，要计算出屏幕的宽度发生了变化，我们需要应用媒体查询或使用JavaScript

对于媒体查询，它将如下所示：

@media (max-width: 620px) {
  section {
      width: 100%;
  }
}

例如：


部分{
背景：白杏仁；
宽度：50%；
身高：75%；
利润率：200px自动0；
边缘顶部：50px；
字体系列：“Courier New”；
线高：150%；
字体大小：粗体；
文本对齐：对齐；
字体大小：100%；
垂直对齐：中间对齐；
}
部分{
宽度：100%；
}

1.
您可以尝试使用transition

section {
    background: blanchedalmond;
    width: 50%;
    height: 75%;
    margin: 200px auto 0;
    margin-top: 50px;
    font-family: 'Courier New';
    line-height: 150%;
    font-weight: bold;
    text-align: justify;
    font-size: 100%;
    vertical-align: middle;
    -moz-transition: width 1s ease-in-out, left 1.5s ease-in-out;
    -webkit-transition: width 1s ease-in-out, left 1.5s ease-in-out;
    -moz-transition: width 1s ease-in-out, left 1.5s ease-in-out;
    -o-transition: width 1s ease-in-out, left 1.5s ease-in-out;
    transition: width 1s ease-in-out, left 1.5s ease-in-out;
  }

@media (max-width: 768px) {
       section {
         width: 100%;
       }
 }

这是一种工作。然而，“截面”大小的变化不是渐进的。基本上，当我缩小窗口的大小时，我需要逐渐缩小外部区域的空白，只有当没有空白时，才开始缩小“区段”的大小。@曼努埃尔，我添加了一个JavaScript例子。请看我的最新答案。但我也很想看到纯CSS解决方案。你想得太多了。只需将
max-width:Xpx:margin:auto
添加到元素中，并根据需要定义X。除去所有其他的东西