css - 使我的网站适应不同的分辨率

Question

我一直在这个网站上工作，它快结束了..直到我发现我的电脑是高分辨率 (1920 x 1080px)。我在 1024x768 像素中测试了我的网站，它...不是我所期望的。

反正我在网上搜了好几遍，还有一些问题没有找到答案，所以我来问你，希望能找到答案!

首先，我希望我的网站能够适应计算机上的任何屏幕分辨率，从 1024 到 1920。此外，我希望当您缩小窗口时它会很舒服(您知道，就像当您使网页只覆盖屏幕的一半时)。

(英语不是我的母语，所以我希望你们仍然能理解它..)

1- 我开始使用 px。这不适用于较低的分辨率，用户必须取消缩放。所以现在我按照网络上的建议使用 % 。但是现在当我缩小屏幕左侧的窗口时，它也会适应，但太多了。我希望它在窗口缩小太多时出现水平滚动条。所以基本上这就是我的问题，我应该怎么做？我发现很多网站都运行良好(比如这个，如果你缩小窗口，就会出现一个水平滚动条!)也许结合 px 和 % ？我不知道，我真的不知道该怎么办。

2- 屏幕分辨率是否与屏幕上的窗口大小相当？例如我的分辨率是:1920x1080px如果我把我的窗口放在屏幕的左半边，将相当于 1920x5040 像素的分辨率？

3- 对于手机和平板电脑，是否只是分辨率较小的问题？或者还有更多内容？

非常感谢您在这方面帮助我!干杯，账单

Answer 1

1. 首先，您需要有一个包含所有元素的容器。每个百分比值都基于它的容器。而对于滚动条，可能在你的站点容器中有CSS overflow: hidden，所以你需要将其删除或将其更改为overflow: auto
2. 我认为您的意思是内容将水平收缩并垂直扩展。这是因为您没有任何容器来用百分比宽度包装每个元素。因此，您需要拥有它并设置该容器的 min-width。
3. 对于触摸设备，您的网站将根据容器的大小进行缩小。