全宽、响应式、网格布局答案

【问题标题】：Full-width, responsive, grid layout全宽、响应式、网格布局
【发布时间】：2014-02-11 05:04:06
【问题描述】：

谁能向我解释一下这个页面是如何运作的？

http://wexley-demo.squarespace.com/

我看到有 javascript，但不明白。

这也是实现这种效果的最简单方法吗？ – 缩放、重新对齐在任何宽度下保持完美网格布局的内容。

谢谢。

【问题讨论】：

标签： javascript html css templates responsive-design

【解决方案1】：

您可以使用媒体查询和 jQuery mobile 来设计您的应用程序。

jQuery mobile 用于设计（响应式设计）和用于应用样式的媒体查询。

【讨论】：

【解决方案2】：

我的建议是学习所有有关响应式设计的知识，然后研究移动优先与桌面优先方法，然后您需要考虑自适应与响应式，如果您选择响应式，则需要考虑响应式 Plus。最重要的是您需要考虑流体布局与静态布局，触摸与非触摸。需要了解 css 中的媒体查询是什么，找出媒体查询不起作用的策略。考虑一下您要发送到不同客户端环境的资产类型以及您是如何做到的。

最好的选择，如果您需要以专业、正确和正确的方式完成这项工作，请聘请一位已经知道如何完成所有这些工作的开发人员。

【讨论】：

【解决方案3】：

我可以建议的媒体查询是响应式设计的最佳解决方案。

让我给你一个基于页面宽度的简单响应代码

<html>
<head>
<style>
@media (max-width: 600px) {
   #p1{
   color:red;
   }
}
@media (max-width: 400px) {
   #p1{
   color:blue;
   }
}
</style>

</head>
<body>
<p id="p1" media="(max-width: 800px)">Hi , This text colour change according to browser size.</p>

</body>
</html>

您可以通过here找到更多教程

【讨论】：