0

这个问题背后的假设是，设计师在响应式网页设计中使用了比例查询，并从智能手机上的 1 列变为显示屏上的 2 列和 3 列，它们可以舒适地适应。

内容小部件 jQuery 插件（如最近更新小部件）应在不同布局中更改其字符。在 1 列布局中，它可能需要 4 个小文本链接，而在 2 或 3 列布局中，它可以包含缩略图和额外文本。

作为参考，这里是内容小部件的最终用户会看到的代码。

HTML：

<section id="sidebar">
  <section id="latestupdates"></section>
</section>

JS：

(function($){
  $(function(){
    $("#latestupdates").widgetco_latestupdates();
  });
})(jQuery);

我认为吸引设计师布局更改的最佳方式是这样。在初始化期间请求断点作为 widgetco_latestupdates 的参数，并使用调整大小事件来切换 css 类。

这甚至是正确的方法吗？这样做有什么陷阱？

更新：

自询问以来，我发现enquire.js将处理运行查询。这仍然留下了这是正确方法的问题。

4

1 回答 1

0

如果你对分配给内容的类很小心，你可能会用标准的 CSS 来控制一切。

例如，假设您的桌面输出类似于 

<article>
<h1> Update heading </h1>
<img src="..">
<p class="intro"> Intro text ... </p>
<p class="full-text"> Full text here </p>
<a href="#" class="read-more">read more</a>
</article>

然后在您的 CSS 中，您可以管理在哪些设备上显示哪些内容 

@media screen and (max-width: 480px){
/* for smartphones */
article img, p.intro{
display:none;
}
}


@media screen and (min-width: 481px) and (max-width: 800px){
/* for tablets */
p.full-text{
display:none;
}
}

我认为如果您可以使用 CSS 来管理不同的布局，那么以后的更新将会更加灵活和容易。

祝你好运！

编辑

如果您正在考虑使用 ajax 根据访问者的视口添加/删除内容，这里有两个有趣的链接：

http://filamentgroup.com/lab/ajax_includes_modular_content/

Github 上的项目

于 2013-06-10T13:30:00.490 回答