使我的网站适应不同的分辨率答案

【问题标题】：Adapting my website to different reslutions使我的网站适应不同的分辨率
【发布时间】：2015-05-16 09:23:12
【问题描述】：

我一直在这个网站上工作，几乎结束了。直到我发现我的电脑是高分辨率（1920 x 1080px）。我用 1024x768px 测试了我的网站，结果……不是我所期望的。

不管怎样，我在网上到处搜索，仍然有一些问题我没有找到答案，所以我在这里问你，希望能找到答案！

首先，我希望我的网站能够适应计算机上的任何屏幕分辨率，从 1024 到 1920。另外，我希望你缩小窗口时感觉舒适（你知道，就像当你让网页只覆盖一半屏幕时）。

（英语不是我的母语，所以我希望你们仍然可以理解它..）

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

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

3- 对于手机和平板电脑，这只是较小分辨率的问题吗？或者还有什么？

非常感谢您在这方面帮助我！干杯，比尔

【问题讨论】：

“我该怎么办？”这是相当广泛的。您最好展示您的工作代码的一个最小示例以及您遇到问题的位置。
这个问题对于 SO 来说太宽泛了。但无论如何要回答：学习响应式设计，使用媒体查询。
谢谢你们的回答！基本上 ;如果我选择px，我的内容对于使用其他分辨率的用户来说并不舒适。如果我选择%，当我缩小窗口时我的内容会缩小，但在这种情况下，我希望我的内容保持相同的大小并且只显示一个水平滚动条。（只需与本网站核对；缩小屏幕左半边的窗口，内容不会缩小，但会出现滚动条）。所以更具体地说，我的问题是；如何处理这两个问题？
我想我得到了min-width 的答案，但我想看看是否存在其他解决方案......比如媒体查询？我会检查的。这是比min-width 更好的解决方案吗？

标签： css resolution screen-resolution

【解决方案1】：

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

【讨论】：

哇已经有很多答案了，非常感谢你们。对于滚动条，这不是“溢出：隐藏”的问题，只是当我缩小窗口时内容会缩小和缩小（这是正常的，因为我设置了百分比）。无论如何，使用“最小宽度”它可以正常工作（好吧，我仍然需要做一些工作来更改我的 CSS 中的所有宽度！.. guh）你的“最小宽度”会基于什么分辨率？就像，我将设置的所有最小宽度必须与一种分辨率一致，例如“1024x720px”？（只是在开始改变一切之前检查我是否理解得很好:)）
min-width 是您百分比值的备份。所以你的元素并不总是基于屏幕大小。当您的屏幕宽度为 1024 像素时，例如，如果您有 min-width: 1280px，您将看到一个滚动条出现。
天哪，就是这样！我把所有东西都放在百分比上，我只为我的container div 设置了一个min-width，不需要为所有元素设置min-width！我什至没有考虑过.. 非常感谢！
媒体查询是关于使 CSS 样式表适应检测到的分辨率。所以这是一个更好、更广泛的解决方案，但就我而言，它并不是真正需要的，对吧？
然后，随意标记为答案。很高兴我能帮忙:)

【解决方案2】：

这不是一个简单的问题。你想要做的是停止思考像素。阅读响应式设计。阅读有关 HTML 的弹性特性及其重排文档的能力。了解媒体查询。

基本上，从一开始，不要为任何东西指定明确的宽度，除非有必要。 s 和

无论分辨率如何，都会自动拉伸到您的全屏宽度。

恐怕你还有相当长的学习曲线。祝你好运，多读书。

【讨论】：