响应式Web设计：具有响应式HTML正文的横向缩放窗口

Question

经过数小时的在线研究-我尚未找到一种响应式网页设计的解决方案，因为它与保留窗口和html正文的比例有关。

示例（原始，向左拉伸和横向拉伸）：

我正在寻找HTML主体，以随着窗口/浏览器的横向增加或减少来调整大小（如果比例仅在单个方向上增加，则保持不变）。到目前为止，包括与视口相关的元标记尚未奏效，但这可能是由于页面样式的“冲突”，即固定的正文或最小高度/宽度元素（可能是错误的）。一个人将如何实现这一理想结果？

Answer 1

如果您想使用纯CSS解决方案，最好的选择是使用padding-bottom。填充百分比相对于宽度。例如，如果将元素的高度设置为零，并且将padding-bottom设置为100％，则它将始终为正方形。只需更改百分比以匹配您所需的宽高比即可。