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

Question

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

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

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

提前致谢！

P.S。 - 以下是我网站上的一些代码示例：

代码@media screen and (min-width: 1600px) // 我的 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

我不知道你的布局是什么样的，我就告诉你，确实，你可以使用@media screen 和 meta viewport，并尝试使用相对大小和位置。

Answer 2

因为您为同一个 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 它将调用定义为 from 的媒体查询701-1600.

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

How to set my website to fit into bigger and smaller screen sizes?

html

javascript

css

screen-size