如何设置我的网站以适应更大和更小的屏幕尺寸？

Question

我想知道是否有人可以帮助解决问题，我正试图让我的网站适应多种屏幕尺寸？我一直在做一些研究并尝试不同的方法（如“adjust-your-website-to-fit-all-resolutions”和“html-css-to-fit-all-screen-resolution”），还尝试了不同的 CSS 代码和 Javascript 代码，但没有成功。我什至尝试了不同的响应式网站代码，例如 html 代码中的 <meta name="viewport" content="width=device-width"> 和我的主 css 文件中的 @media screen and (min-width: 700px) ，但都不起作用。我只是不知道为什么它不起作用。

我想知道的另一件事是，它可能是我现有的 html 和 css 代码。您会看到我的不同图像、标题、内容等，我一直在使用position:absolute;，我想知道这是否也会影响我适合所有屏幕尺寸。我还想知道可能导致我的问题的另一件事是我当时基于计算机屏幕设计网站的方式。您会看到，当我第一次设计网站时，我使用的是 1366 x 768（分辨率屏幕尺寸） 的计算机，而当我第一次注意到我的网站存在问题时，我使用的是 1600 的计算机x 900（分辨率屏幕尺寸）。想知道position:absolute; 是否会损害我的网站适应不同屏幕尺寸的能力。

任何人都可以建议或推荐任何使用 CSS、HTML 和/或 Javascript 使我的网站适应更大或不同大小的方法吗？

提前致谢！

附： - 以下是我网站上的一些代码示例：

代码@media screen and (min-width: 1600px) // 计算机尺寸 1600 x900 来自我的 CSS 文件：

 #wel {
    position:absolute;
    top: 108px;
    left: 278px;
}
@media screen and (min-width: 700px) {
   #wel {
       position:absolute;
       top: 108px;
       left: 250px;
   }
}
@media screen and (min-width: 1600px) {
   #wel {
       position:absolute;
       top: 108px;
       left: 400px;
   }
}

我在我的 html 中放入的代码以使响应式代码工作：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

有人有什么建议吗？

Answer 1

因为您为同一个 div id(#wel) 定义了两个不同的最小宽度媒体查询，所以它不起作用，请尝试此操作并根据您的要求进行更新。

#wel {
    position:absolute;
    top: 108px;
    left: 278px;
}
@media screen and (min-width: 700px) {
   #wel {
       position:absolute;
       top: 108px;
       left: 250px;
   }
}
@media screen and (min-width:701px) and (max-width: 1600px) {
   #wel {
       position:absolute;
       top: 108px;
       left: 400px;
   }
}

在此示例中，直到宽度 700px，它将调用定义为 (min-width:700px) 的第一个媒体查询，并且从 701-1600 它将调用定义为从 701-1600 的媒体查询。

Answer 2

我不知道你的布局是什么样子，我只是告诉你，确实，你可以使用@media 屏幕和元视口，并尝试使用相对大小和位置。