Elm 如何处理响应式网页设计？

Question

我在 github 上找到了这个用于响应式 CSS 的库，然后我开始问自己……Elm 是否响应式？从理论上讲，Elm 可以做 HTML、CSS 和 JavaScript 可以做的任何事情……我看不到任何读取操作系统或屏幕大小等输入的方法。我可能忽略了其他因素。

也许可以写一个端口？

我至少见过一种情况，即 F#，其中外部影响或要求由 comonads 处理，但这是相当复杂的解决方案。这是co-effects 上的博客，其中讨论了上下文感知编程。这听起来很复杂，但这正是我们想要的响应式网页。

图片来自Wikipedia。

Answer 1

大多数响应式设计将通过@media 查询来自 CSS，因此 Elm 的主要工作只是输出不难设置样式的 HTML（例如，避免用于布局的表格或不适当的内联样式）。

如果您想根据屏幕大小动态执行某些操作，可以使用Window package，它可以发出Task 来检索当前大小或订阅resizes 事件。

一般来说，我希望 Elm 程序的输出不会与实现响应式设计冲突。

Answer 2

您可以在此处找到如何使用 Elm 创建响应式页面的分步说明：Responsive Design with Elm Style Elements。它避免了 CSS 的杂耍，但调整了 HTML 输出。