Question

我正在使我的网页响应，但努力保持页面上的元素不要相互重叠。我对网络开发很陌生，所以我甚至不知道如何处理这个问题。我非常感谢现阶段的一些一般性建议，以帮助我了解并继续前进。

Answer 1

一些建议让你入门。

首先在文档的头部添加一个视口元标记，这样可以阻止智能手机和平板电脑缩放页面以适应视口（屏幕）

<head>  
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>

使用CSS定义元素大小，因为这样您就可以在不同的视口中重新设置元素。同时尽量避免包含任何元素的硬像素尺寸，因为它们可能会在小屏幕上引起问题，选择宽度比960px宽100％

有时您需要在小屏幕上更改布局。例如，两个并排图像，每个宽度为50％，可能无法在智能手机上使用。发生这种情况时，请使用media queries更改布局

CSS

img{
 width:50%;
 height:auto;
}

@media screen and (max-width:400px) {
 img{
  width:100%;
 } 
}

希望这有助于您前进！

<强>更新

看看它是否更接近你所追求的（注意占位符图像可能加载缓慢）：

重要的一点是：

在您的HTML中我删除了您对图片的内嵌样式，并将其从第65行开始移至CSS
从CSS第134行开始我为窄视口构建了@media样式。请注意，我已将您的2列布局折叠为单个列布局。此详细信息是完全可选的，但为您提供了更多工作空间
在您的HTML第4行，您有<link href="index_responsive.css" rel="stylesheet" media="screen and (max-width: 800px)" />。从技术上讲，这没有什么不妥，尽管使用一个style.css文件并在该文件中包含所有内容以及该样式中的@media screen ...语句和样式更常见文件