Question

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

我想知道的另一件事是，它可能是我现有的html和css代码。你看到我的不同图像，标题，内容等，我一直在使用@media screen and (min-width: 700px)，我想知道是否影响我的所有屏幕尺寸。还有一件事我想知道也许可能导致我的问题，就是我当时根据我的电脑屏幕设计我的网站的方式。您看到我第一次设计网站时我使用的是 1366 x 768（分辨率屏幕尺寸）的计算机，当我第一次发现我的网站出现问题时，我正在使用 1600的计算机x 900（分辨率屏幕尺寸）。想知道position:absolute;是否会影响我的网站调整到不同屏幕尺寸的能力。

任何人都可以建议或推荐使用CSS，HTML和/或Javascript的方式来使我的网站适应更大或更大的尺寸吗？

提前谢谢！

P.S。 - 这里有一些我网站代码的例子：

代码@media屏幕和（min-width：1600px）//计算机大小1600 x900来自我的CSS文件：

position:absolute;

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

 #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;
   }
}

有人有任何建议吗？

Answer 1

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

Answer 2

因为你已经为同一个div id（#wel）定义了两个不同的最小宽度媒体查询，所以它不起作用，请尝试这个＆amp;根据您的要求更新。

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

如何设置我的网站以适应越来越大的屏幕尺寸？

2 个答案: