如何使 HTML 页面的一部分响应？答案

【问题标题】：How to make part of HTML page responsive?如何使 HTML 页面的一部分响应？
【发布时间】：2021-03-18 06:40:46
【问题描述】：

我只想让 HTML 页面的一部分响应特定宽度，而其余部分响应浏览器大小。

示例：在网页中，用户可以设计带有文本和图像的网格。用户可以改变整个布局的宽度。因此，当用户更改设计布局的宽度时，只有该布局会响应设置为用户选择的宽度。

换句话说，设计的一部分会响应用户设置的宽度，而网页的其余部分则保持对浏览器大小的响应。

【问题讨论】：

我不确定我是否正确理解了您的问题，但如果我理解了，那么您可以简单地使用%。如果600px 宽度父元素有一个宽度设置为50% 的子元素，那么子元素的宽度将为300px。如果然后父宽度减小到400px，子宽度将自动减小到200px。

标签： html css responsive-design media-queries

【解决方案1】：

你的意思是这样的：

【讨论】：

那种。粉红色部分必须响应整个宽度。蓝色部分也必须响应，但宽度比粉色部分更薄。提前感谢您抽出时间帮助我。

【解决方案2】：

这对你有用吗？ https://codepen.io/panchroma/pen/bGByxaQ

HTML

<head>  
....
<meta name="viewport" content="width=device-width, initial-scale=1">
</head> 

....  
<div class="responsive">
  <h1>this content is reponsive</h1>
  <p>....</p>
</div>
<div class="user-content">
   <h1>This content set by user</h1>
   <p>...</p>
</div>

CSS

.responsive {
   /* as required */
}

.user-content {
  /* width and other values set by user */
  width: 1500px;
  overflow-x: scroll;
}

【讨论】：

是的，有点。但是如何设置粉红色背景以响应浏览器？只是将课程命名为“响应式”？很抱歉我不能完全理解。
嗨@DanielsonSilva，> 但是如何设置粉红色背景以响应浏览器？响应行为由文档头部的视口元标记设置。这有意义吗？如果需要，我可以发送更多详细信息。
在你的例子中，我点击了链接。当我缩小浏览器时，粉色部分正在调整大小。我猜宽度：100%；是宽度的默认值。
是的，粉色 div 的默认宽度是 100%，您可以通过将 CSS 详细信息添加到 .responsive 选择器来将其更改为您喜欢的任何内容。
对我的第一条评论的部分更正。需要 viewport 元标记，以便您的页面在移动设备上保持响应。您可以在粉红色的 div 中添加您喜欢的任何内容，但您要确保您添加的内容也保持响应。例如，在指定宽度时（在粉红色的 div 中），请考虑使用相对单位，例如 % 或 vw，而不是像素。您可能还需要使用@media 查询。祝你好运！