使用 Cordova 和 Ionic 框架并为移动、平板电脑和桌面编写 CSS 的混合应用程序答案

【问题标题】：Hybrid application using Cordova and Ionic framework and writing CSS for Mobile, Tablet and Desktop使用 Cordova 和 Ionic 框架并为移动、平板电脑和桌面编写 CSS 的混合应用程序
【发布时间】：2016-09-30 12:38:42
【问题描述】：

我正在尝试使用 Cordova 和 Ionic 框架构建一个混合应用程序。在这个过程中，我认为相同的 CSS 是否适用于移动设备、平板电脑和桌面设备。我更关心在桌面的 css 中使用 Vh 和 Vw（基于视口高度和宽度的相对单位），并且根据不同的显示器分辨率，它会增加字体大小、图标和图像大小。

那么这是最好的编码方式吗？或者我应该为桌面创建单独的 css 文件来处理不同的分辨率。使用一个代码库创建可在移动设备、平板电脑和桌面设备上运行的混合应用程序的最佳方法是什么。

提前感谢您的帮助。

【问题讨论】：

如果您正在编写自定义 css 以使其具有响应性，那么您可以使用媒体查询，或者您可以使用一些响应式框架（例如 Bootstrap）来帮助您为任何尺寸的设备构建应用程序
但是我正在使用 cordova 和 ionic 构建一个应用程序。它具有 Angular js 支持的优点

标签： cordova ionic-framework hybrid

【解决方案1】：

Ionic 本身提供了响应式网格，您可以通过它对齐您的内容。

您可以在此处查看更多信息。 http://ionicframework.com/docs/components/#grid

【讨论】：

对 ionic 提供响应式网格，但它使用 vh 和 vw 以便根据移动设备视口调整文本大小和图标大小。但是桌面呢，用vh和vw可以吗？如果我使用 vh 和 vw 则页面将根据显示器分辨率调整大小。那么这是最好的方法吗？
我认为 ionic 应用程序不会在桌面上运行。Ionic 纯粹用于移动应用程序开发。 Ionic 专门用于移动和平板电脑应用程序。因此，无需考虑分辨率问题，因为 ionic 已经为您处理了这个问题。继续使用 ionic grid 并使用 ionic lab 在桌面上实时查看结果。

【解决方案2】：

这取决于您当前在 ionic 框架中使用的版本，以创建最佳用户体验。

离子 1

Ionic 1 专注于构建原生/混合移动应用，而不是移动网站。随着时间的推移，您可能会遇到的一些限制是 UI/UX 和浏览器支持。老实说，这取决于您更专注于什么。

如果原生/混合应用程序是主要方法，那么可以，使用 ionic 很好（但该网站可能不是最好的 UI/UX）。如果您更专注于网络应用而不是原生/混合应用，那么我不建议您使用 ionic。

Documentation for Ionic 1

离子 2

Ionic 2 专注于通过 Cordova 构建本机/混合应用程序，以及添加 Progressive Web Apps 和 Electron 的功能，如 here 所述。如果您采用这种方法并想要两全其美，那么有很多工具可以实现。

请注意，Ionic 2 利用 Angular 2，项目的结构从 Ionic v1 到 v2 不同（以更直观的方式）。我建议查看两者的文档，了解最终用户的最大利益是什么，并据此做出决定。

Documentation for Ionic 2

【讨论】：

我确实浏览了文档，但我有点困惑是否应该使用 Cordova + ionic 和一个用于移动、平板电脑和桌面的代码库。有没有其他工具可以推荐给我。