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

Question

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

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

任何人都可以建议或推荐任何使用 CSS、HTML 和/或 Javascript 的方法来使我的网站调整为更大或不同的尺寸吗？

提前谢谢您!

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

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

 #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 的媒体查询。