Question

我正在构建类似于 WIX 的应用程序，该应用程序使用户可以轻松创建网站。在顶部，有这三个图标（桌面，移动，平板电脑），供用户在相应的视口中选择和查看其网站。

我很好奇，这样做的最佳方法是什么？

我查了一下，发现iFrame是实现这一目标的一种方法。我正在用react构建此应用，并使用“ react-frame-component”包将iframe包装为组件。仍然离预期的结果还很远。

Answer 1

如果您的媒体查询基于屏幕尺寸，而不是基于dpi或其他设备特定功能，则可以使用所需的度量将整个网站预览简单地包装在div中

例如：

.wrapper.mobile{
  width:100%;
  max-width:480px; /* or whatever */
}

.wrapper.tablet{
  width:100%;
  max-width:720px; /* or whatever */
}

.wrapper.desktop{
  width:100%;
}

然后使用简单的js函数，根据用户选择将正确的类添加到包装器中。

Answer 2

解决此问题的一种方法是将当前设备类型存储在状态中的某个位置。例如，在redux存储中，并根据状态有条件地加载CSS或类。

例如，如果您在js中使用某种CSS，这会更容易。样式化的jsx组件。然后，您可以基于简单的条件渲染来加载它们。

例如。

if(this.state.deviceType === "mobile"){
    let styling = styles.mobile;
}

然后在组件中使用样式变量

在“桌面浏览器”窗口的不同视口中渲染网站[移动，平板电脑，桌面]

2 个答案: