灵活和动态的网页技术答案

【问题标题】：Flexible and dynamic web pages techniques灵活和动态的网页技术
【发布时间】：2016-05-24 12:03:37
【问题描述】：

我有 html、css 的基本知识和 JS 的良好知识。但是我把所有这些放在一起有问题。我主要为Android 开发，我的意思是原生应用程序。我对Android layout 有很好的理解。动态布局的概念在 android 中很棒，当我开发应用程序时，我会尽可能使用相对位置和动态大小，例如 match_parent,wrap_content。它们非常强大，应用程序在任何屏幕上看起来都很棒。在 android 中也有这样的度量，称为 dp 密度独立像素。这也是一个很棒的概念。

所以我想深入研究网页开发，但我不知道构建响应式和灵活页面的常见模式和技术。
我对CSS 的@media 和viewport 指令略知一二，但我再次无法将我所有的知识集中起来开始构建响应式网页。
例如使用percantage而不是px更好，因为我可以看到大多数px被使用，我无法理解这个概念为什么不到处使用percantage来使页面响应？

也许我在网页开发中遗漏了一些重要的东西，所以我为什么要询问建议。

请推荐一些关于当前构建响应式网页最佳实践的好文章（基于最流行的引擎 Wordpress、Drupal、Joomla）或从头开始更好地理解。
还有一个重要的问题是如何构建移动友好的网页等等。
非常感谢

【问题讨论】：

只是一些友好的指导：Stack Overflow 不鼓励寻求意见和建议的问题。他们被认为是off-topic。相反，请描述问题以及为解决该问题所做的工作。 stackoverflow.com/help/how-to-ask
我明白了，你能建议在哪里问这种问题吗？
这是个好问题！ :-) 我自己有几个问题想听听专家的意见。我不相信 Stack Exchange 是合适的地方。您可以继续 Stack Overflow Meta 寻求指导，或发布您的问题（来自您的评论）。

标签： javascript android html css responsive-design

【解决方案1】：

要设计响应式网页，有两种选择：

1) 设计一个用于计算机的网站，另一个用于 facebook 等移动设备的网站

2) 相同的设计

响应式设计有很多技巧：

1) 您可以对所有内容使用百分比，但您必须对其进行多次计算

2) 您可以从引导程序中使用网格系统

3) 您可以使用媒体并最小化您的内容，并通过您的浏览器（如 Firefox）对其进行测试以获取响应式设计视图

4) 您可以在百分比和媒体之间进行混合。

在这种技术中，你必须知道位置和显示以及它是如何工作的

主 div 的百分比必须像 body 或 main wrapper 宽度 100% 并且内部 div 必须取决于它们的宽度

【讨论】：

【解决方案2】：

如果您想快速开始响应式网页设计，请考虑从许多已建立的框架之一开始，例如 Bootstrap 或 Foundation 或 Skeleton。还有很多其他的。

它们会在开始时为您节省大量时间，并且您将获得良好的跨浏览器结果。选择一个你喜欢的，跳进去，然后在你去的时候了解更多！

祝你好运！

【讨论】：