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

我最近使用fullpage.js包制作了一个网站，这基本上会将网站的各个部分分解为静态大小的页面，并将其大小设置为视口的完整大小。媒体通过宽度和高度来管理样式的查询模式

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

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

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

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

来源

2015-12-02 gdbj

我会说在处理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看到。

来源

2015-12-04 11:05:39 Alvaro

ahhh ...响应选项可能是我最初想要的。很高兴知道。 Fullpage是你的工作？真的好东西！ – gdbj

我添加了我的答案，但我想，您的答案中有更多有趣的信息。 – gdbj

可能与fullpage.js一起处理这个问题是不可能的。但是，试图通过DIV像下面来包装一个部分的内容：

HTML：

 

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

CSS：

 

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

这不正是你问什么，但这种方法就会使可以使用容器的滑块滚动该块。

来源

2015-12-02 20:35:33

我的问题真的集中在如何利用CSS和媒体查询来管理我的内容样式。一般来说，依靠溢出并不是一个好主意，但对于fullpage.js包也不适用。 – gdbj

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

对于一个静态设计的网站设计的网页是全屏显示，设计将有宽高比的宽高比。至少，我的设计师根据隐含的屏幕比例生成设计。根据该比例构建宽度和高度的媒体查询将确保内容在屏幕调整大小时看起来不错。

如果宽度或高度根据比例远离重击，则可以进行较小的更改以进行调整，但沿着主轴布置大部分响应式设计是我开始的地方。

对我来说，设计是基本方，所以我我的结构化查询，例如：

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

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

来源

2015-12-05 17:53:09 gdbj

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

回答

相关问题