Html 具有香草css的响应性应用程序_Html_Css

Html 具有香草css的响应性应用程序

html css

Html 具有香草css的响应性应用程序,html,css,Html,Css,我正在尝试构建一个在所有设备上看起来都很棒的应用程序，但我在响应性方面遇到了一个问题，事实上，我对我应该做什么有一个想法。下面是我的想法： 1-如果我使用设备工具栏构建应用程序，这意味着我从320px到1440px的媒体查询开始像这样：这就是我实际做的，一切都很顺利，至少我是这么想的，但是当我使用视口宽度（增加或减少它）时，我看到了一些意想不到的结果这是在605px视口宽度上：我用绝对定位构建了这个应用程序，我在后台应用了一个相对于img的位置，也许这是一个糟糕的做法，我知道，请注意

我正在尝试构建一个在所有设备上看起来都很棒的应用程序，但我在响应性方面遇到了一个问题，事实上，我对我应该做什么有一个想法。下面是我的想法：

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

像这样：

这就是我实际做的，一切都很顺利，至少我是这么想的，但是当我使用视口宽度（增加或减少它）时，我看到了一些意想不到的结果

这是在605px视口宽度上：

我用绝对定位构建了这个应用程序，我在后台应用了一个相对于img的位置，也许这是一个糟糕的做法，我知道，请注意，这个应用程序在设备工具栏提供给我的所有设备上都很好

我的一些朋友建议我使用一个框架，摆脱这些头痛，但我真的想练习香草CSS很好，请考虑这是我的第一个应用程序，我正在尽我最大努力使它看起来很伟大的所有设备

所以我的问题是：

我应该这样留着吗？因为从逻辑上讲，如果它在屏幕上看起来正常的话像iPhone6这样的设备。。。（设备工具栏上显示的设备）提供给我）我不需要解决视口宽度问题

或者我应该使用一个框架，但我不喜欢我知道的这个解决方案这是可行的，正如我告诉你的，我想练习香草css

或者我应该使用另一种技术，如flexbox或网格系统和这是我认为最难的解决方案，因为我要重建整个应用程序，但它是好的

我想问的最后一件事是：在我未来的项目中有什么我应该注意的吗？特别是如果我正在使用香草CSS，恭喜你构建了你的第一个应用程序

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

2）对于大多数响应迅速的应用程序，几乎总是有一些宽度看起来并不完美。这些点通常在断点转换之前/之后

3）一般来说，您不希望使用位置

相对

或

绝对

来处理页面布局。在很多情况下，它们都是有帮助的，但我认为可以肯定地说，在尝试创建页面布局时，它们永远不应该是第一件事

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

5）对于一般的页面结构，使用库并没有什么错。由于它在很多公司都有使用，我强烈建议您熟悉Bootstrap，特别是它的网格框架。如果你真的走这条路，请仔细阅读某些事情的规则。例如，我无法告诉你有多少人的应用程序看起来一团糟，因为他们没有遵循Bootstrap网格系统的基本规则：一行的唯一子项应该是

列

。说10遍

祝你好运

祝贺您构建了第一个应用程序