jquery - 通过宽度和高度管理样式的媒体查询模式

Question

我最近使用 fullpage.js 创建了一个网站包，它基本上将您网站的各个部分分成静态大小的页面，大小与视口(viewport)的完整大小相匹配。

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

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

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

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

Answer 1

我想说处理 fullpage.js 时最简单的解决方案是使用插件提供的 responsiveWidth 或 responsiveHeight 选项。

这与强制部分高度的自动大小的一些 CSS 相结合会使其更容易。

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

看看this site使用 fullpage.js 并查看第二部分如何在小宽度上变大以解决空间问题。你可以在 http://burntmovie.com/ 中看到非常相似的东西

关于媒体查询，不要忘记您还可以在同一样式上使用 width 和 height 条件:

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

这可以在 fullpage.js demo page 中看到.