Question

有人能够向我解释这个页面是如何运作的吗？

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

我看到有javascript，但不了解它。

这也是实现这种效果最简单的方法吗？ - 缩放，重新调整在任何宽度上保持完美网格布局的内容。

谢谢。

Answer 1

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

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

Answer 2

我的建议是学习响应式设计的所有内容，然后研究Mobile First vs Desktop First方法，然后你需要考虑Adaptive vs Responsive，如果你选择Responsive，那么你需要考虑Responsive Plus。最重要的是你需要考虑流体与静态布局，触摸与非触摸。需要了解css中的媒体查询，找出媒体查询不起作用的策略。考虑一下您要发送到不同客户端环境的资产类型以及如何执行此操作。

最好的选择，如果你需要专业，正确和正确地完成这项任务，请聘请一位知道如何做到这一切的开发人员。

Answer 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

全宽，响应，网格布局

3 个答案: