Jquery 用于按宽度和高度管理样式的媒体查询模式

我最近使用这个软件包创建了一个站点，它将站点的各个部分分解为静态大小的页面，大小与视口的完整大小相同

这意味着每个部分的所有内容都必须适合视口大小。内容不会溢出，因为用户的任何滚动都会将页面移动到下一节

这一切都很好，但是我在如何使网站对各种屏幕大小做出响应方面遇到了一些挑战。我最终做的是为一个非常小的空间设计css，然后对于更宽/更高的屏幕，我会设置媒体查询，使文本变得更大，以占据更多的空间

然而，我发现我的范例充满了错误。尽管我努力获取所有可能的屏幕大小配置，但我仍然遇到了文本在视口边界之外流动的问题。另外，必须考虑所有的排列方式是非常“沉重”而且不是很优雅，这让我觉得我没有想出一个好的解决方案

---

必须有一个更直观的媒体查询模式来管理这一点。想知道其他人做了什么。

可能使用fullpage.js无法解决此问题。但请尝试按div将一节的内容包装起来，如下所示：

html:

(...) css:

1.溢流块{ 最高高度：80%； 溢出y：自动； }

---

这并不完全是您所要求的，但是这个解决方案可以使用容器的滑块滚动此块。

我想说，处理fullpage.js时最简单的解决方案是使用插件提供的

响应宽度

或

响应高度

选项

这与一些强制自动调整截面高度大小的CSS相结合，将更容易实现

.fp-section,
.fp-slide,
.fp-tableCell{
    height: auto !important;
}

看看如何使用fullpage.js，看看第二部分如何在较小的宽度上变大以解决空间问题。 你可以从中看到非常相似的东西

关于媒体查询，请不要忘记，您也可以在同一样式上使用

宽度

和

高度

条件：

@media screen and (max-width: 890px)  and (max-height: 680px) {
    #section3 img{
        bottom: -50px;
    }
}

---

这一点可以从中看出

其他人已经在寻找解决方案的技术细节，但我正在寻找模式。经过一番思考，我相信我找到了我一直在寻找的答案。答案也许很简单，但出于某种原因，我一开始在接近它时挣扎着

对于一个静态设计的网站，设计的页面是全屏的，设计的宽高比是宽高比。至少，我的设计师根据一个隐含的屏幕比例生成了设计。按照该比率对媒体查询的宽度和高度进行结构化，将确保在调整屏幕大小时内容看起来良好

如果宽度或高度与比例相差甚远，那么可以做一些小改动来调整它，但沿主轴布置大部分响应性设计就是我开始的地方

对我来说，设计基本上是方形的，因此我将我的查询结构化为：

@media (min-width: 501px) and (min-height: 501px) {}
@media (min-width: 701px) and (min-height: 701px) {}
@media (min-width: 901px) and (min-height: 901px) {}

---

起初，我有嵌套的媒体查询，它变得疯狂和丑陋。这使它变得更加简单和直观。

我的问题真正集中在如何使用CSS和媒体查询来管理我的内容的样式。对于好的设计来说，依赖溢出通常不是一个好主意，但也不适用于fullpage.js包。。。响应选项可能就是我最初想要的。很高兴知道。你的作品是什么？真是好东西！我添加了我的答案，但我认为你的答案包含了更有趣的信息。

@media screen and (max-width: 890px)  and (max-height: 680px) {
    #section3 img{
        bottom: -50px;
    }
}

@media (min-width: 501px) and (min-height: 501px) {}
@media (min-width: 701px) and (min-height: 701px) {}
@media (min-width: 901px) and (min-height: 901px) {}