0

我的网站上有几个页面，仅在宽屏显示器上看起来不错。像这样的东西：

|========================|
|      H E A D E R       |
|========================|
|Block1 |     B I G      |
|-------|    D A T A     |
|Block2 |   B L O C K    |
|========================|
|      F O O T E R       |
|========================|

对于显示器较小的人来说，这并不是很友好。

我认为如何解决这个问题的选择很少。

选项 A：删除部分内容或对其进行重组以使其正常显示以用于窄显示

|===============|
|  H E A D E R  |
|===============|
|Block1 | Block2|
|---------------|
|     B I G     |
|    D A T A    |
|   B L O C K   |
|===============|
|  F O O T E R  |
|===============|

选项 B：允许人们配置他们希望如何查看这些页面：全屏模式或窄屏模式。在第一种情况下，页面将按原样呈现（第一个表），如果人们选择第二种方法，它将按照选项 A（第二个表）中的描述进行配置。该项目仍需要执行项目#1，这是可以接受的

选项 C：但在我看来，让 UI 变得敏捷的最佳方法是：如果页面很宽，那么内容 div 元素将按行顺序显示；如果页面很窄，那么它们将按列顺序显示。

所以想法是 Block1，Block2 将具有相似的宽度和高度，并将由浏览器自动定位。

问题 #1：如何仅使用 HTML+CSS 标记实现选项 C？

我确实意识到，Block1，Block2 - 应该有 style="float:left"，但是当我这样做时，块 2 总是在块 1 的右侧，除非浏览器窗口太窄。而且“大块”永远不会在 2 个小块的右侧（请参阅下面的代码）

问题 #2：尝试实施选项 C 是否有意义？

PS这是我的原型：

<html>
<head><title>Test blocks</title></head>
<body>

<style type="text/css">
div {
    border: 1px solid black;
    position: relative;
}
div.b1 {
    width:300px;
    height: 200px;
    float: left;
}
div.b2 {
    width:300px;
    height: 100px;
    float: left;
}
div.big {
    width: 800px;
    height: 200px;
    float: left;
}
</style>
<div class="b1"> Block 1 </div>
<div class="b2"> Block 2</div>
<div class="big"> Big Data block</div> 

</body></html>

PPS 我将边框设置为可见仅指示那些 div，我不会在最终标记中使用它

4

2 回答 2

2

使用类似 Bootstrap 的东西。它具有“this”的含义，即框架中内置的响应式设计。

http://twitter.github.io/bootstrap/

于 2013-07-18T02:35:08.897 回答
1

如果您不想使用框架（我的建议是使用它来节省很多钱，但是使用移动优先设计的 ZURB 基础）您必须了解媒体查询是什么：

@media (min-width:500px){
   CSS code that is readable only in device with more than 500px screen ;
}


@media (max-width:500px){
   CSS code that is readable only in device with less than 500px witdh screen;
}

并将此元数据添加到您的 html 代码中

<meta name="viewport" content="width=device-width, initial-scale=1.0">

要学习它并构建你想要的东西，不要学习如何使用框架（bootstrap o Zurb Foundation），而是阅读他们的“GRID 系统”的代码，然后......开始吧！

于 2013-07-18T08:04:39.623 回答