带有香草CSS的响应式应用程序

Question

我正在尝试构建一个在所有设备上都看起来不错的应用程序，但是我在响应能力方面遇到了问题，实际上我对应该做什么感到不满意。所以这是我在想什么：

1-如果我使用设备工具栏构建应用程序，这意味着我将从320px到1440px的媒体查询开始

像这样：

这就是我实际上所做的，一切都正常，至少那是我的想法，但是当我使用视口宽度（增大，减小它）时，我看到了一些意外的结果

这是605像素的视口宽度：

我使用绝对位置构建了此应用，并且在后台应用了相对于img的位置，也许这​​是我所知的错误做法，请注意，该应用在设备工具栏为我提供的所有设备上看起来都很棒。

我的一些朋友建议我使用框架并摆脱所有这些麻烦，但实际上我想很好地练习香草CSS，请考虑这是我的第一个应用程序，并且我正在尽力使它看起来很棒所有设备

所以我的问题是：

1. 我应该这样保留它，因为从逻辑上讲，如果在 Iphone 6等设备...（设备工具栏上的设备 给我）我不需要解决视口宽度问题。
2. 或者我应该使用框架，但我不喜欢这种解决方案 这是可行的，而且正如我告诉您的那样，我想练习香草CSS。
3. 或者我应该使用其他技术（例如flexbox或网格系统） 我认为这是最困难的解决方案，因为我要重建 整个应用程序，但没关系。

我想问的最后一件事是：在我的未来项目中，我应该注意什么吗？

Answer 1

恭喜您构建了第一个应用程序！

1）在Stackoverflow上发布问题时，直接在您的帖子中提供您的代码示例，和/或在jsfiddle.net这样的网站上包含指向您正在运行的代码版本的链接总是有帮助的， JSbin.com，codepen.io等。

2）对于大多数响应式应用程序，几乎总是存在几种宽度，使事情看起来并不十分完美。这些点通常在断点转换之前/之后。

3）通常，您不想使用位置relative或absolute来处理页面布局。在许多情况下它们可能会有所帮助，但是我可以肯定地说，在尝试创建页面布局时，从不是您要做的第一件事。

4）目前，使用常规CSS（没有库）处理页面布局的最佳方法可能是Flexbox，因为它的多功能性和所有主要浏览器的采用。我强烈建议您学习并熟悉它。

5）将库用于一般页面结构的东西没什么错。由于它被众多公司使用，因此我强烈建议您熟悉Bootstrap-特别是其网格框架。如果您确实走这条路，请非常仔细地阅读某些规则。例如，我无法告诉您有多少人的应用看起来很混乱，因为他们没有遵循Bootstrap网格系统的基本规则：row的唯一子项应该是col。说10次。

祝你好运！