Html 当我最小化页面时，如何使我的网页响应

您好，我有一个页面，我将图像放在页面左侧，将描述放在页面右侧。我有术语内容，我将其放在图像和描述内容下方。现在，当我最小化时，我只能看到适合屏幕的部分描述内容。但我想要的是，当我最小化时，描述应该放在图像下面，术语应该放在描述下面

这是我的图片课，我把它放在身体左侧：

  .appPreview {
  max-width: 300px;
  height: 300px;
  border: 1px solid #cecece;
  margin-left : 55px;
  }
 span.grey {
 color: #cecece;
  } 

 .right_content
    {
        float: left;

        border: 1px solid #CCC;
        width: 400px;
        margin-top : -520px;
      padding-bottom : 150px;
    }

这是我将描述放在身体右侧的课程：

  .appPreview {
  max-width: 300px;
  height: 300px;
  border: 1px solid #cecece;
  margin-left : 55px;
  }
 span.grey {
 color: #cecece;
  } 

 .right_content
    {
        float: left;

        border: 1px solid #CCC;
        width: 400px;
        margin-top : -520px;
      padding-bottom : 150px;
    }

这是我的课程，用于在图片和描述下方放置术语：

div.MoreInfoterms {
width : 850px;
margin-right : 250px;
margin-left : 55px;
margin-top : 20px;
border: 1px solid #cecece;
background-color: #f7f9f9;
max-height:700px; 
margin-bottom : 20px;
}

---

我真的不知道如何实现这一点，因此非常感谢您的帮助。

只需创建最小/最大大小边界，您就可以设置任意多个

<link rel="stylesheet" href="/path/to/small.css" type="text/css" media="only screen and (max-width:800px)">

<link rel="stylesheet" href="/path/to/medium.css" type="text/css" media="only screen and (min-width:801px) and (max-width:1000px)">

<link rel="stylesheet" href="/path/to/large.css" type="text/css" media="only screen and (min-width:1001px)">

试试这个：

@media screen and (max-width: 1024px) {
   .appPreview {
      display: block;
   }
   .right_content {
      float: none;
   }
   div.MoreInfoterms {
      width: 100%;
   } 
}

---

您应该使用百分比而不是px。

如果您想要响应性网页，您需要使用媒体查询，您可以在此处看到一些标准查询：

---

它们基本上会随着css的应用而改变

建议先从您的移动设备样式开始，然后使用

minwidth

为更大的设备添加其他样式作为媒体查询。我发现这种方法使事情更容易计划和维护。查看深入教程。

也许您应该查看媒体查询。这里Daniel的答案可能有用，但这是不需要的，因为您需要更多不同的文件，这些文件不便于使用，并且会使您的网页加载时间更长。