javascript - React.js PWA 中桌面端和移动端的分离设计

标签 javascript reactjs progressive-web-apps

我目前正在构建一个用于个人学习的渐进式 Web 应用程序,我想知道大多数现代 PWA 中都包含的一件事。我在想如何在PWA中对桌面端和移动端进行单独的设计。我的想法是在 CSS Viewpoints 中完成它,但我不确定这是一个很好的解决方案。

最佳答案

我认为您应该使用移动优先的方法来创建 View 。查看 Material-UI 库。它是设计组件样式和制作响应式页面布局的最佳解决方案之一。此外,它还支持 css 和 css-in-js 样式解决方案。如文档中所述

Material-UI is developed mobile first, a strategy in which we first write code for mobile devices and then scale up components as necessary using CSS media queries. To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your element.

<meta
  name="viewport"
  content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no"
/>

关于javascript - React.js PWA 中桌面端和移动端的分离设计,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58151573/

相关文章:

javascript - 如何检查javascript中正则表达式的格式

javascript - 处理循环内动态选择器的点击 react native

android - 独立 PWA 中断登录

c# - 我们可以为 asp.net .web 表单创建 pwa-app 吗?

javascript - 如何检查客户端 JavaScript 代码的语法错误?

javascript - 单击时切换按钮背景颜色

javascript - 带有 promise 和闭包范围的延迟加载

reactjs - 如何将部分逻辑转移到另一个文件

reactjs - 如何在TypeScript文件中接收任何元素作为ReactChild?

caching - 工作箱软件 : Runtime caching not working until second Reload