Question

我最近使用fullpage.js软件包创建了一个网站，该软件包基本上会使您网站的各个部分分成静态大小的页面，大小与视口的完整大小相同。

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

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

然而，我发现我的范例充满了错误。尽管努力获得屏幕大小的所有可能配置，我仍然遇到文本流出视口边界的问题。此外，必须考虑所有的排列真的＆＃34;沉重＆＃34;并不是很优雅，让我觉得我没有找到一个好的解决方案。

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

Answer 1

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

这与一些强制部分高度的自动尺寸的CSS结合起来会更容易。

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

使用fullpage.js查看this site并查看第二部分如何在小宽度上变大以解决空间问题。您可以在http://burntmovie.com/

中看到非常相似的内容

关于媒体查询，请不要忘记您也可以使用相同风格的width和height条件：

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

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

Answer 2

其他人已经寻找解决方案的技术细节，但我一直在寻找这种模式。经过一番思考，我相信我有我想要的答案。答案可能很简单，但出于某种原因，我最初在接近它时挣扎。

对于设计有全屏幕页面的静态设计网站，设计将具有宽高比的宽高比。至少，我的设计师根据隐式屏幕比率生成了设计。按照该比率构建宽度和高度的媒体查询将确保在调整屏幕大小时内容看起来很好。

如果宽度或高度远远超出比例，那么可以进行微小的改动以进行调整，但是沿着主轴布置大部分响应式设计是我开始的地方。

对我来说，设计基本上是方形的，所以我构建了我的查询：

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

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

Answer 3

可能使用fullpage.js无法处理这个问题。但是尝试用div包装一个部分的内容，如下所示：

HTML：


    <div class="block">
       (...)
    </div>

的CSS：


    .overflow-block {
        max-height: 80%;
        overflow-y: auto;
    }

这不完全是你问的，但是这个解决方案可以使用容器的滑块滚动这个块。

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

3 个答案: