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

Question

我最近使用 fullpage.js 包制作了一个网站，它基本上将您网站的各个部分分成静态大小的页面，大小与视口的完整大小一致。

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

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

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

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

Answer 1

大概用fullpage.js是无法处理这个问题的。但是尝试用 div 包裹一节的内容，如下所示：

html:


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

css:


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

这与您的要求不完全相同，但此解决方案可以使用容器的滑块滚动此块。

Answer 2

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

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

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

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

中看到非常相似的内容

关于媒体查询，别忘了您还可以在同一样式上使用 width 和 height 条件：

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

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

Answer 3

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

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

如果宽度或高度与比例相差甚远，则可以进行微小的改动来调整它，但我的起点是沿主轴布置大部分响应式设计。

对我来说，设计基本上是正方形的，所以我的查询结构如下：

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

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

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

Media Query pattern to manage style by both width and height

html

css

jquery

media-queries

fullpage.js