4

我最近一直在研究响应式网页设计。虽然有许多技术和实践都属于“响应式 Web 设计”的范畴，但 RWD 的主要支柱似乎是 CSS3media查询。因此，RWD 基本上是一种客户端策略。

但是对于低分辨率布局，您通常必须简单地删除整个 HTML 部分。例如，3 列布局可能需要在较低分辨率下变为 1 或 2 列布局，这意味着您基本上DIV在较低分辨率下隐藏了整个 s。我在这里看到的问题是，您实际上仍然需要将相同数量的 HTML 代码发送到低分辨率设备，即使它永远不会显示。换句话说，您将相同的 3 列 HTML 发送到高分辨率屏幕和低分辨率手机，但每次将其发送到低分辨率手机确实是完全浪费带宽.

问题：我在这里的理解是否正确，或者 RWD 是否也包含服务器端技术？

例如，假设您有一个像这样的骨架 HTML 页面：

<div id = "main-content">
  <!-- content goes here -->
</div>

并且onload（或onresize），客户端浏览器检测屏幕分辨率并发出 AJAX 请求，该请求main-content使用该分辨率的适当 HTML 填充。

这种利用服务器端策略来实现 RWD 的技术是否曾经在实践中使用过？

4

5 回答 5

3

一般来说，响应式开发——如果做得正确的话——在标记中不应该有任何冗余或重复的数据。同样，以一种屏幕宽度显示的内容也会以另一种宽度显示，只是以不同的方式。

我喜欢在页面加载时根据屏幕尺寸进行 AJAX 调用的想法，但这并不是响应式设计的真正想法，实际上页面加载（对于访问者）需要更长的时间。这也意味着当浏览器窗口尺寸发生变化时（例如：在平板电脑上切换方向），页面布局不会适应。除非您此时提出新的 AJAX 调用，否则在这种情况下，您将发送比单个响应式页面加载更多的流量，并且也会给您的服务器带来更多负载。

于 2013-05-23T15:35:09.777 回答
2

你几乎回答了你的问题......

调整窗口大小时您需要进行 ajax 调用的时间要长得多，然后只给整个 html 页面一次并使用 css 代替。

响应式设计的主要思想不是隐藏你的内容。当你隐藏你的内容时，你会遇到很多麻烦，比如搜索引擎会显示你的内容，但是当一个人在他的平板电脑上访问你的网站时，内容不会显示出来。

编辑：

只是为了在我谈论内容时说清楚，我说的是您页面上的重要内容，例如“adsense”或其他对访问者并不真正重要的东西，应该完全隐藏起来。

关于服务器端技术，有很多，一个很好的例子是自适应图像，它将较低分辨率的图像发送到较低的设备，但您也可以使用客户端技术来做到这一点。

编辑2：

我差点忘了

更不用说 onresize 每次尺寸变化都会触发一次。换句话说，如果你从 1000x1000 到 950x1000，它将触发 50 次 - 50 次 AJAX 调用。@塞巴斯蒂安雷诺

于 2013-05-23T15:31:42.517 回答
0

http://css-tricks.com/make-client-side-data-available-server-side/

在这篇文章中，Chris Coyier 谈到了使用客户端方法来检查屏幕的当前宽度，然后将其保存到 cookie 以供服务器端使用 - 然后刷新页面。我并不完全赞同这种方法，但也许它对你有用。

您可能想研究 JavaScript 功能检测甚至 UA 嗅探，尽管它不受欢迎。

于 2013-05-23T15:43:55.397 回答
0

您不必删除/隐藏较低分辨率的列。诀窍是在低分辨率下堆叠，然后在高分辨率的列中对齐它们。例如：

<div class="one">Column One</div>
<div class="two">Column Two</div>
<div class="three">Column Three</div>

.one, .two, .three {
blah blah blah, whatever needs to be here.
}

然后添加CSS：

@media only screen and (min-width: 600px) {
float: left; /* screens larger than 600px wide will throw them into columns via float*/
}
于 2013-05-23T17:05:33.850 回答
0

为什么要在移动设备上隐藏其他列？删除信息绝不是一个好主意，这只会让访问者不喜欢您网站的移动版本。

网站上的列通常是用浮动的 html 元素创建的。使用媒体查询删除上述浮动，瞧！信息现在都在一个列中。

如果这一列最终太高，您可能需要考虑添加用于显示/隐藏信息的切换开关，但这就是我要删除移动网站的内容。

于 2013-05-23T15:42:19.797 回答